如何在ul li中垂直居中锚标签文本

Question

这是我的HTML:

<ul id="sub_nav" class="block_hide trim no_list no_line" style="display: block; left: 524.5px;">
<li><a href="/path1" class="one">1st button</a></li>
<li><a href="/path2" class="one">2nd button</a></li>
<li><a href="/path3" class="one">3rd button</a></li>
</ul>

如果我现在拥有的话,我还附上了一张图片.我尝试添加display:table-cell; vertical-align:middle; 到锚标签类,但它没有工作我也尝试添加一个span锚标签与一个类:display:table-cell; vertical-align:middle; 但这也不起作用,在这两种情况下,按钮的高度并不恒定.

如何垂直居中文本并保持按钮的高度和宽度相同？

结束显示:table-cell解决方案,因为它是最交叉的浏览器....起初我不喜欢它,因为我不得不硬编码我的按钮的宽度而不是100%但是一旦我超过了这是一个坚实的解决方案:我的李:

.header #sub_nav li {
    display: table;
    float: left;
    font-size: 11px;
    line-height: 12px;
    margin-bottom: 12px;
    margin-left: 12px;
    width: 86%;
}

我的一个:

    .header #sub_nav li a {
    display: table-cell;
    height: 45px;
    vertical-align: middle;
    width: 111px;
}

Answer 1

我做了类似于你所要求的事情.将父级定义为"display:table",将元素本身定义为"vertical-align:middle"和"display:table-cell"对我有用.

Answer 2

如果 li（或 div 等）中只有一项，最简单的方法是将 line-height 设置为与元素的高度相同，并且它会垂直对齐。我在下面创建了一个简单的小提琴，希望这会有所帮助！ http://jsfiddle.net/fCkLJ/

li {
  /* other styling */
  height: 30px;
  line-height: 30px; 
}