How to align text in center?

[mistaya123]

Hi
Please tell me how to make the text of a link come in the middle of the box.
I have a horizontal navigation bar. but the texts like, home, contact us, etc. displayed as blocks, are at the top of their boxes. increasing the margin or the padding makes the whole box come down. i want to bring the text in the middle.
I hope u understand what im talking about :).
Any help please? i have attached an image of the navigation bar.

html code:

<div class="nav">
    	<div class="navigation"></div>
        <div class="center1">
        	<ul>
              <li><a href=""><span>About Us</span></a></li>
              <li><a href=""><span>Portfolio</span></a></li>
              <li><a href=""><span>Contact Us</span></a></li>
              <li><a href=""><span>About Us</span></a></li>
              <li><a href=""><span>About Us</span></a></li>
              <li><a href=""><span>About Us long</span></a></li>
      	 	</ul>
        </div>        
        <div class="right1"></div>
    </div>

css code:

.nav{
	/*border:#00F 1px solid;*/
	margin: -45px 0px 0px 0px;
}

.right1 {
	height:45px;
	background:url(../images/rr2.gif) right no-repeat;
	width:10px;
	float:right;
}

.navigation {
	width:270px;
	height:45px;
	background:url(../images/header_tub.gif) left no-repeat;
	float:left;
	
}



.center1, .center1 ul {
	height:45px;
	width: 630px;
	float:left;
	background:url(../images/g_h2.gif) center repeat-x;
}


.center1 ul li {
	display:block;
	float:left;
	height:36px;
	margin-top:3px;
}


.center1 a:link, .center1 a:visited {
	text-decoration:none;
	color:#C9F9C1;
	display:block;
	height:36px;
	padding:0px 0px;
	border: 1px solid red;
}

.center1 ul li a span {
	display:block;
	height:36px;
	padding:0 15px 0 0;
	margin-left:15px;
	border:1px solid orange;
}


.center1 li a:hover {
	color:#060;
	text-decoration:none;
	background:url(../images/ahover-bg.png) left top no-repeat;
	height:36px;
}

.center1 ul li a:hover span{
	background:url(../images/spanhover-bg.png) right top no-repeat;
	height:36px;
}

[vinpkl]

replace this in your css

.center1 ul li a span {
	display:block;
	height:30px;
	padding:6px 15px 0 0;
	margin-left:15px;
	border:1px solid orange;
}

vineet

[Stomme_poes]

^ Hm, that might work: because the height was adjusted (made smaller), the adding top padding shouldn’t be able to screw with the total height of the box.

increasing the margin or the padding makes the whole box come down.

Because padding is added to the height or width of a block. So see that Vineet has lowered the height of the box from 36px to 30px… then you can add the 6px padding and the size is the same as before.

There’s also a popular trick where the line-height is set equal to the height of the box the text is in (so in the span, if it’s 30px high then the line-height would also be 30px).
However that trick fails once you get text long enough to wrap.

[tom26]

Add a line height the same height as your height to your list items

.center1 ul li {
	display:block;
	float:left;
	height:36px;
        line-height:36px;
	margin-top:3px;
}

This will automatically center them in the middle.

[Stomme_poes]

Only reason we might not want to do that, Tom, is because of the last link:

s/he called it “About Us long” and I’m expecting some actual long text might appear there.

Since the sites I build have long dutch words, I often am not able to use the line-height trick because once you get text wrapping, it’s too big (you’ll have 36px of line height for each line of text).

So while at first I thought line-height would be best, with that “long” sitting there, I think Vineet’s is a better idea for now (to be honest I’d rewrite all the HTML and CSS differently and possibly would try to use vertical-align: middle instead).

[mistaya123]

It worked! thanx.
lol it was so simple! and i had spent hours wondering and fighting with the code.
whats wrong with using line-heights?

[Stomme_poes]

Just take your HTML and make the text of one of your buttons really really long (multiple words I mean). Like, “Check Out Our Products!”

You’ll see it.

If all your text fits, though, then it won’t be a problem (until someone has larger text… so you might also want to test with some text-enlargement (not zoom)).

[mistaya123]

ok i get it about the line-heights.
yes my code is not perfect. im just a learner yet. hoping to master it. (soon i hope!)

[Stomme_poes]

yes my code is not perfect. im just a learner yet. hoping to master it. (soon i hope!)

Ain’t none of us masters, but some of us have lost hair in the trenches : )

[tom26]

@Stomme_poes

So while at first I thought line-height would be best, with that “long” sitting there, I think Vineet’s is a better idea for now (to be honest I’d rewrite all the HTML and CSS differently and possibly would try to use vertical-align: middle instead).

But using the “vertical-align: middle” I thought that wouldn’t just solve the issue unless you also used line-height? I maybe wrong, but thought vertical-align only really worked on table cells with out the use on line-height.

[Stomme_poes]

Vertical-align: middle wouldn’t work with the original code posted, no.

However it does work on inlines, not just in table cells, though my understanding of it working with inlines is screwy enough that half the time when I try to implement it, I do it wrong.

What it does is let an inline align itself vertically to the (state where, bottom, baseline, middle, top, or the rest) of an adjoining element (here’s where I get confuzled, I forget if this other element also has to be inline… I thought so).

So for instance I’ll use it a lot for lining a text input with a submit button, or lining up a checkbox or radio button with a label. Since they’re all either inlines or inline-blocks, they can line each other up with their lines, since inlines have those lines listed above (baseline etc).

[ot]Getting a bit off-topic:
I keep this link bookmarked because it shows all the goofy lines of inline boxes and how weird they get when they play together: http://dbaron.org/css/2000/01/dibm-20000113
[/ot]

Edit: here’s another link, one of those oldies but goodies… I have to re-read it every once in a while cause I always forget the little details: http://phrogz.net/CSS/vertical-align/index.html

*edit3 I forgot this but of course vert-align also works with the CSS property display: table which you can put on non-table elements (except in IE7 and below).

[RyanReese]

@tom26

But using the “vertical-align: middle” I thought that wouldn’t just solve the issue unless you also used line-height? I maybe wrong, but thought vertical-align only really worked on table cells with out the use on line-height.

Vertical-align and line-height have no corrolation whatsoever. THey can be used together but one does not depend on the other to work

@Stomme_poes

However it does work on inlines, not just in table cells, though my understanding of it working with inlines is screwy enough that half the time when I try to implement it, I do it wrong.

It is a tricky subject and even Eric Meyer has troubule with it. I sometimes have trouble implimenting it but if you truly understand the inline formatting module, even small sections, then you can piece together how to get it working.

Gary Turner does a good job explaining how to get it working on his workshop

[Stomme_poes]

Yes, he does : )