css - 浮动列表项内的垂直居中锚点

Question

我有一个像这样的简单菜单：

<ul class="menu">
    <li>
        <a href="">Home</a>
    </li>
    <li>
        <a href="">Products</a>
    </li>
    <li>
        <a href="">Contact</a>
    </li>
</ul>

无序列表的列表元素向左浮动并且有一个固定的height:

ul.menu li {
    float: left;
    height: 50px;
    list-style: none;
    padding: 0 10px;
    background-color: yellow;
}

jsFiddle

现在我想将列表元素内的锚点垂直居中。

最好的方法是什么？

Answer 1

要使文本垂直居中，请将 a 设置line-height为与元素高度相同的值。看到你有一个设定的高度，这将没有问题：

.menu li a {
    line-height: 50px;
}

http://jsfiddle.net/QNMy7/3/

Answer 2

添加 line-height 等于高度：

.menu li {
    float: left;
    height: 50px;
    **line-height: 50px;**
    padding: 0 10px;
    list-style: none;
    background-color: yellow;
}

Answer 3

除了 float 和 table-cell，还可以使用 inline-block：

.menu li {
    display: inline-block;
    line-height: 50px;
    padding: 0 10px;
    list-style: none;
    background-color: yellow;
}
.menu li a {
    vertical-align: middle;
}

与其他帖子类似，我设置line-height: 50px了元素。您可以在此示例中省略高度。.menu livertical-align: middlea

见演示：http: //jsfiddle.net/audetwebdesign/QNMy7/7/

Answer 4

您可以使用它line-height来控制垂直对齐，但这仅在每个列表项都被限制在一行时才能可靠地工作。

实现此目的最可靠的方法是删除浮动并将列表项显示为 CSS table-cell：

.menu {
    display: table;
}

.menu li {
    height: 50px;
    padding: 0 10px;
    list-style: none;
    background-color: yellow;
    display: table-cell;
    vertical-align: middle;
}

.menu li a {
    display: block;
}

这样，如果其中一个链接落在两条线上，它仍然垂直居中，如下所示：

http://jsfiddle.net/QNMy7/6/

Answer 5

.menu li {
    float: left;
    height: 50px;
    padding: 0 10px;
    list-style: none;
    background-color: yellow;
    text-align: center;
    min-width: 100px;
}

.menu li a
{
    line-height: 50px;
}

Answer 6

问题在于.menu li课堂。您已声明 afloat使其向左移动，但要使其成为vertically-aligned，您必须删除float并应用 adisplay:table-cell;才能vertical-alignment正常工作。

例如，

.menu li {
    /*float: left;*/
    display:table-cell;
    vertical-align:middle;
    height: 50px;
    padding: 0 10px;
    list-style: none;
    background-color: yellow;
}

这是工作解决方案

希望这可以帮助。