Question

以下是fiddle link

现在，如何在此处垂直对齐文本，使其恰好位于li元素的中间。我可以通过应用小paadding-top来实现，但在这种情况下，li的顶部不会保留链接。使用display:table-cell，水平对齐所有li元素（我不想要）。那么，解决方案是什么呢？

Answer 1

这是WORKING SOLUTION。

守则：

.menuItems a {
    display: table-cell;
    height: inherit;
    vertical-align: middle;
    width: inherit;}

Answer 2

在.menuItems中使用具有相同高度值的行高，例如：

height: 40px;
line-height: 40px;

Answer 3

试试这个：

http://jsfiddle.net/ssF5K/3/

CSS：

.menuItems{
position: relative;
border-top: 1px solid #CCC;
vertical-align: middle;
height: 40px;
width: 85%;
padding: 0;
font-family: Geneva, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
font-size: 1.2em;
font-weight: 500;
text-align: center;
    line-height:40px;
}

如何使用CSS将文本垂直对齐到中间？

3 个答案: