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


  • Michael: You can use get_header(2) in your case. The filename of your custom header has to be header-2.php. The problem with include(your_file.php) is, all
  • cliff: hi wonder if you can help me, pls i designed www.kouga.mobi using dreamweaver CS3 and now want to make the phonenumbers into links so that if you
  • jerey: how do i rewrite this because it tried RewriteEngine on #Options +FollowSymlinks RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FIL

About


Advertisements