LebGeeks

Kassem

Member

[CSS] Centering Text Vertically

Hey guys,

Do you guys know how to center text vertically inside a block? I tried "padding: auto 0;" but that didn't work... Here's my code:

<div id="nav"><!--Begin Header Tag-->
        <ul style="list-style:none">
        	<a href="index.html"><li>WELCOME</li></a>
            <a href="profile.html"><li>PROFILE</li></a>
            <a href="services.html"><li>SERVICES</li></a>
            <a href="price.html"><li>PRICE LIST</li></a>
            <a href="branches.html"><li>BRANCHES</li></a>
            <a href="find.html"><li>FIND US</li></a>
        </ul>
</div> <!--End Nav Tag-->

#nav {
	width:830px;
	height:50px;
	margin:0 auto 10px;
	background-color:#0066CC;
}

#nav li {
	display:inline-block;
	width:135px;
	height:50px;
	font-size:108%;
	text-align:center;
	font-weight:600;
	color:#FFF;
}


#nav li:hover {
	display:inline-block;
	background-color:#34CDEF;
	width:135px;
	height:50px;
	color:#009;
}

Any suggestions?

Joe

Member

Re: [CSS] Centering Text Vertically

First of all, put your <a> tags inside the <li>, not the other way around. It makes more sens and I think it's more valid.

Second of all, I'm not sure what you're trying to achieve, but try a margin-top:50% on your <ul> tag.

Tell me if it works.

EDIT : margin-top. It's margin-top.

Last edited by Joe (June 9 2010)

arithma

Member

Re: [CSS] Centering Text Vertically

Is the property repetition important?

rolf

Member

Re: [CSS] Centering Text Vertically

Wasnt the same question posted like a week ago?

Kassem

Member

Re: [CSS] Centering Text Vertically

@ rahmu: I'm trying to re-do the same effect I did with Flash, but unfortunately there's no align panel for HTML :/ Anyway, the reason why I'm wrapping the <li> tags with the <a> tags is because I want the whole <li> element to be an anchor and not just the text of the <li>. The <li> tags are 135px wide and 50px high, so the text is being centered horizontally but not vertically, and that's what I'm trying to solve.

@ arithma: what do you mean?

@ rolf: No? where?

arithma

Member

Re: [CSS] Centering Text Vertically

In li and li:hover. You got the same properties with the same values repeated twice. Is that important?
(I could try it myself, but rather post the question :/)

Joe

Member

Re: [CSS] Centering Text Vertically

I still don't understand what you mean by 'centered vertically'.

And I still maintain that you put the <a> inside the <li>. even if the <a> tags don't contain exclusively text.

Kassem

Member

Re: [CSS] Centering Text Vertically

In li and li:hover. You got the same properties with the same values repeated twice. Is that important?
(I could try it myself, but rather post the question :/)

No not really... I believe the li:hover inherits from the li.

@ rahmu: take a look at the following image:

You see how the text is sticking to the top? I do not want that to happen, I want the text to be "centered vertically" i.e: to be placed in the middle of the navigation bar. Clear now? :)

Joe

Member

Re: [CSS] Centering Text Vertically

EDIT : you can either put a padding-top on the blue wrapper (#nav), or a margin-top to the <ul>

Tell me if it works.
PS don't use percentages, use fixed pixel counts.

Last edited by Joe (June 9 2010)

Kassem

Member

Re: [CSS] Centering Text Vertically

Ok I finally got it to work! Here's what I did:

#nav li {
	display:inline-block;
	width:135px;
	height:35px; //I decreased the height because usually the padding adds up to the size
	padding-top:15px; //added this to move the text down
	font-size:108%;
	text-align:center;
	font-weight:600;
	color:#FFF;
}

//For arithma, I removed the repeated properties and it still works fine 
#nav li:hover {
	background-color:#34CDEF;
	color:#009;
}

Last edited by Kassem (June 9 2010)

rolf

Member

Re: [CSS] Centering Text Vertically

@ rolf: No? where?

Nevermind, it was a similar but different problem. In this case too, a TD with valign="middle" would fix it too.