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

Posted 2023-03-05

【中文标题】浮动列表项内的垂直居中锚点

【英文标题】：Vertical centering anchors inside floated list items

【发布时间】：2013-06-08 12:03:51

【问题描述】：

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

<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

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

最好的方法是什么？

【参考方案1】：

除了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;

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

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

【讨论】：

inline-block 在元素之间添加了令人讨厌的空格。我在发布之前已经尝试过了

确实，这些讨厌的小空间有时很烦人。在某些情况下，布局需要元素之间的左右边距，因此这不会成为问题。如果 html 代码不包含额外的空格，那么小空格就会消失，但这也是一种麻烦。如果您需要元素边对边对齐，浮动是最好的选择。

css-tricks.com 上有一篇关于删除讨厌空格的文章。但读完之后，我决定坚持花车

inline-block 有用且更易于使用的一种情况是，当您想要创建一个水平菜单并且您希望链接在页面上居中而不是向左或向右齐平时。

【参考方案2】：

您可以使用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/

【讨论】：

That is correct and already answered.

【参考方案3】：

添加行高等于高度：

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

【讨论】：

+1 用于将line-height 添加到.menu li。看看我对 Kyle Sevenoaks 的回答的 cmets

【参考方案4】：

问题在于.menu li 类。您已声明 float 使其向左移动，但要使其成为 vertically-aligned，您必须删除 float 并应用 display: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;

这里是WORKING SOLUTION

希望这会有所帮助。

【讨论】：

什么？从什么时候开始您需要拥有display: table-cell; 来启用垂直居中。当然这是一种方法，但它不是唯一的。

是的。这是一种方法，而不是唯一的方法。 - @KyleSevenoaks

我不想删除float。列表元素应保持向左浮动

【参考方案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;

【参考方案6】：

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

.menu li a 
    line-height: 50px;

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

【讨论】：

这行得通，谢谢。我现在可以从 li 元素中删除 height 属性吗？我担心现在有点多余

如果你去掉 li 元素的高度，它可能会搞砸文本的居中。 line-height 告诉每行文本的高度为 50px 高，与元素的高度相同，因此它匹配。如果您有多于一行，则不会看到下一行。

@KyleSevenoaks 也许像 Airen 建议的那样在.menu li 上设置line-height 是一个更好的主意？

你可以这样做，但你仍然需要高度。

@KyleSevenoaks 我知道，但它更简洁一些，因为如果我还没有 .menu li a，我就不必声明它。我认为这是您回答的一个很好的选择