在显示为 table 行的列表中垂直居中内容

Question

我正在创建垂直页面导航。我知道确切的高度 (300px)，并且将有 5 个项目（所有项目的尺寸可能不同，但 none 其中的高度将超过 60px）。

我想要实现的是在 table 行中垂直居中显示所有项目，这里是 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;
}

Answer 2

出于对一切神圣事物的热爱，请不要为此滥用表格。 Flexbox 是你的救星，无论是菜单布局本身还是完美的双向居中。考虑以下示例：

.wrapper {
    background-color: #EEE;
}
ul, li {
  margin:0;
  padding:0;
}
ul {
    display: flex;
    flex-direction: column;
}
li {
    display: flex;
    align-items:center;
    justify-content:center;
    height: 60px;
    width:120px;
    border:1px dotted black;  
}

<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>

将 ul 上的 flex-direction 更改为 row 以具有相同的水平布局。

只需要 forget support for IE9，但由于现在已经有 3 个主要版本，因此对于大多数网站来说通常认为没问题。

在显示为 table 行的列表中垂直居中内容

Centering content vertically in list which is displayed as table rows

css

vertical-alignment

css-tables