Question

我正在创建垂直页面导航。我知道确切的高度（300px），并且将有5个项目（所有这些项目可能具有不同的大小，但它们都不会超过60px的高度）。

我想要实现的是显示在表格行中垂直居中的所有项目，这里是小提琴：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的属性（我还添加了一个红色边框以突出显示alignement）。所以，这里是修改后的代码：

<强> 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都是您的救星。请考虑以下示例：

＆＃13;

.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;  
}

＆＃13;

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

＆＃13;

将flex-direction上的ul更改为row，使其水平布局相同。

只需要forget support for IE9，但由于现在已经过去的3个主要版本通常被认为对大多数网站都很好。

在列表中垂直居中内容，显示为表格行

2 个答案: