scriptygoddess

09 Jan, 2007

Vertical Center Text in DIV

Posted by: Jennifer In: Bookmarks|CSS|CSS related

Like I said, I'm still fighting my way through understanding CSS. Here's a little tid-bit I finally understand today. Had a bit of text that I wanted to have centered in a nav bar. "vertical-align: middle;" didn't seem to do anything. Found this article which said this:

the thing with vertical-align is that it's vertical aligning text according to the default line-height of the inline-text boxes. You can manipulate that by setting the line-height to the same height as your block, but this will only be effective if the line of text (link) does not wrap onto more than one line.

NOW it makes sense…

So if you had:

<div id="nav"><a href="#" class="centerme">Home</a></div>

Then:

#nav {
height: 25px;
line-height: 25px;
}
.centerme {
vertical-align: middle;
}

should do the trick…

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

2 Responses to "Vertical Center Text in DIV"

1 | GeminiGeek

January 11th, 2007 at 12:27 am

Avatar

It works with or without vertical-align, as long as height=line-height. Vertical-align somehow only works if there's images, like this hack.

2 | Benny

January 15th, 2010 at 4:32 pm

Avatar

Thank you. I have been googling this solution forever it feels like. Finally it all makes sense to me.

Comment Form

Featured Sponsors

About


Advertisements