html - 垂直对齐 div 中的 li 项

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;

}

在线demo

Answer 1

您可以将 line-height:30px; 添加到您的 li 元素中，(与菜单栏的高度相同)

Demo