Vertically aligning li items in div

Question

I have list items that displayed inline. I want to align them vertically inside the green div.

<div id="topMenu" class="topMenu">
 <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Documents</a></li>
   <li><a href="#">Articles</a></li>
   <li><a href="#">Info</a></li>
  </ul>
</div>

.topMenu li
{
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}

.topMenu a
{
    color: White;
    font-weight: bold;
    text-decoration: none;

}
.topMenu
{
    background-position: center;
    background-color: Green;

    height: 30px;
    font-family: arial, Helvetica, sans-serif;
    font-size: 0.8em;
    vertical-align: middle;
    text-align:center;

}

online demo

Answer 1

You can just the display of your <li> elements a bit, like this:

.topMenu li
{
    display: inline-block;
    list-style-type: none;
    padding: 6px 10px;
}

Check out an updated demo here

Alternatively, you could add the padding to the <ul> with a new rule:

.topMenu ul {
    padding-top: 6px;
}

Check out that version here

In either case you may want to remove the height from .topMenu and let the top/bottom padding determine it, so when the page scales with zoom on older browsers it still looks "right". ​

Answer 2

You have to go with the padding property if you want to be strict xhtml and delete vertical-align.

Furthermore it makes no sense to try to align something vertically, that is displayed inline.

Just consider: padding is the inner space between the element and the boxmodel border.

Answer 3

Internet Explorer didn't support inline-block until version 8.

You might try the work-around here.

Answer 4

You could add line-height:30px; to your li elements, (the same as the height of the menu bar)

Demo