Question

我正试图将一排细胞垂直居中于一个绝对定位的div中。 div的高度由紧邻表格之前的内联块元素确定。

我希望将.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

Answer 1

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

我个人经常使用填充，因为在我看来，当使用百分比时，它会更有活力。我重新构建了代码HERE以显示我的意思。

div中的垂直居中表格元素

1 个答案: