在 div 中垂直居中内联表元素 [重复]答案

【问题标题】：Vertically center inline-table element in a div [duplicate]在 div 中垂直居中内联表元素 [重复]
【发布时间】：2014-05-10 23:55:42
【问题描述】：

我试图在绝对定位的 div 中将一行单元格垂直居中。 div 的高度由表格前面的 inline-block 元素确定。

我想将.title 保留在表格之外，因为如果屏幕不够宽，我希望整个菜单跳到下一行。

我已经尝试定义高度和行高，应用填充，并提供 .menu-box 元素 display:table-cell 和 vertical-align:middle，但似乎没有任何效果。

代码如下：

<div class="container">
    <div class="menu-box">
        <h1 class="title">TITLE</h1>
        <table class="menu"><tr>
            <td>Item 1</td>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
        </tr></table>
    </div>
</div>

CSS：

* {margin:0;padding:0;}
body,html {height:100%;width:100%;}

.container {
    position:relative;
    height:100%;
}

.menu-box {
    position:absolute;
    bottom:0;
    width:100%;
//  line-height:132px;
}

.title {
    display:inline-block;
    font-size:132px;
}

.menu {
    display:inline-table;
    font-size:26px;
//  padding:40px 0;
}

还有一个Fiddle

【问题讨论】：

不要使用表格。我的建议是使用 ul, li :)
@Dhaval 是正确的。表格只能用于表格元素。
当然，这与您提出的问题无关。 :)
@Mr.Alien 你是对的。这样可行。我只需要将它应用于.title 和.menu。
@Dhaval 我想将菜单项保留在一行中，以防视口宽度小于菜单和标题的总宽度。我应该改用divs 并使用css 给它display:inline-table 等吗？

标签： html css html-table vertical-alignment

【解决方案1】：

有几种方法可以垂直对齐列表。 line-height, vertical-align, padding.

我个人经常使用填充，因为在我看来，当使用百分比时它会更加动态。我重新构建了您的代码 HERE 以表明我的意思。

【讨论】：