Question

有没有办法在纯CSS中垂直居中 n 嵌套div？

考虑无序列表：

<ul>
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">Products & Services</a>
    </li>
    <li>
        <a href="#">Contact Us</a>
    </li>
</ul>

我希望列表在响应式网站上水平显示。因此，我将使用表格布局，将display：table应用于<ul>并将table-cell显示为<li>元素。

但在这些<li>元素中，我还希望元素垂直居中。这很重要，因为在响应式设计中，我们不知道<a>元素中的文本何时会流到两行或包含在一行中。例如。上面的Home链接只占用一行，而Products＆amp;服务链接将占用两个较小的宽度。

现在，我们不能在这里使用表技巧，因为这里父元素<li>有display：table-cell，而不是display：table。

有没有办法做到这一点：

没有更改上面的HTML结构？这通常是像WordPress这样的CMS菜单的默认结构，有时我们没有选择更改它;
在纯CSS中，没有jQuery的帮助;和
在所有现代浏览器中工作？

（请不要建议对<li>元素使用非表格布局。上面的例子只是：一个例子;问题仍然存在：我们可以垂直居中立即嵌套的div吗？）< / p>

由于

Answer 1

为什么不简单地将vertical-align:middle;添加到设置了li的{{1}}元素。

Vertical Align

vertical-align CSS属性指定了一个垂直对齐方式内联或表格框。

Answer 2

试试这个CSS：

li {
display:table-cell;
vertical-align:middle;
}

Fiddle

垂直居中的嵌套DIV

2 个答案: