css - 在显示为表格行的列表中垂直居中内容

Question

我正在创建垂直页面导航。我知道确切的高度 (300px)，并且将有 5 个元素(所有元素的尺寸可能不同，但没有一个会超过 60px 的高度)。

我想要实现的是在表格行中垂直居中显示所有元素，这里是 fiddle :https://jsfiddle.net/6sp5n7xg/ .

HTML

<div class="wrapper">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5<br />Item 6</li>
    </ul>
</div>

CSS

.wrapper {
    height: 300px;
    background-color: #EEE;
}

ul {
    display: table;
}

ul li {
    display: table-row;
    height: 60px;
}

水平运行正常:https://jsfiddle.net/vq9mt02h/1/ ，但我希望它也是垂直的。

Answer 1

Here a working example从您的代码开始，仅稍作修改。您必须将每个单元格内容包装在 span 中并将其设置为 display:table-cell;，移动到此选择器还有关于 height 和 vertical-align(我还添加了一个红色边框以突出中间对齐)。所以，这里是修改后的代码:

HTML

<div class="wrapper">
    <ul>
        <li><span>Item 1</span></li>
        <li><span>Item 2</span></li>
        <li><span>Item 3</span></li>
        <li><span>Item 4</span></li>
        <li><span>Item 5<br />Item 6</span></li>
    </ul>
</div>

CSS

ul li {
    display: table-row;
}

ul li span {
    display: table-cell;
    height: 60px;
    border:solid 1px red;
    vertical-align:middle;
}