关于文本对齐的简单css问题

Question

我正在制作菜单。看起来像是东西：

<div>
    <ul>
        <li><a>menu/<br/>item</a></li>
    </ul>
</div>

我希望垂直居中。我经常和

一起去

ul li { height: 50px; line-height: 50px; }

例如，

。但显然这不起作用，因为它是菜单中的标签。我需要文字看起来像

menu/
item

菜单中的

。任何想法如何解决这个问题？谢谢！

Answer 1

您可以设置较小的线条高度和相同的填充顶部和底部，如下所示：

ul li {
   padding: 20px 0;
   line-height: 14px;
}

此方法假设每个项目列表包含两行文本，它们都是相等的高度。

看起来像这样 - http://jsfiddle.net/ajcw/fVamh/

Answer 2

垂直对齐仅在表格单元格中受支持。您可以调整填充以移动文本（仅适用于您的特定字体大小，如果更改，则必须重新调整填充），或者如上面提到的Dan Andrews，您可以使用display: table-cell但是，这只有较新的浏览器支持，因此根据您的受众，它可能不是一个可行的解决方案。

有关表格单元格支持，请参阅QuirksMode.com