Вертикальное выравнивание элементов li в div

Question

У меня есть элементы списка, которые отображаются в строке. Я хочу выровнять их по вертикали внутри зеленого 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;

}

онлайн демо

Answer 1

Вы можете добавить line-height:30px; к вашим li элементам, ( соответствует высоте строки меню )

Демо

Answer 2

Вы должны использовать свойство padding, если хотите быть строгим xhtml, и удалить вертикальное выравнивание.

Кроме того, нет смысла пытаться выровнять что-то по вертикали, что отображается в строке.

Только учтите: отступ - это внутреннее пространство между элементом и рамкой boxmodel.

Answer 3

Internet Explorer не поддерживал встроенный блок до версии 8.

Вы можете попробовать обойти здесь .

Answer 4

Вы можете немного отобразить элементы <li>, например:

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

Проверьте обновленную демонстрацию здесь

В качестве альтернативы выможет добавить заполнение к <ul> с новым правилом:

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

Проверьте эту версию здесь

В любом случае вы можете удалить height из .topMenu, и пусть верхний / нижний отступ определяют его, поэтому, когда страница масштабируется с увеличением в старых браузерах, она все равно выглядит «правильно».