Question

我有非常复杂的表格布局，有一个设置为display: table的包装器，其子项设置为display: table-cell。不幸的是，桌子包装的一些孙子也需要垂直对齐。我无法将它们设置为表格单元格，因为它似乎不起作用。有什么想法吗？

基本上我想把红色按钮的“t”字中心。我不知道父母的身高，所以不能使用line-height因为inline-block vertical-align没有也行得通。并将其显示更改为table-cell会削减其高度。

这是jsfiddle： http://jsfiddle.net/cZ7Th/5/

CSS：

.menu {
    width: 100%;
    display: table;
    background: #eee;
}

.logo {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    background: #ccc;
    padding: 0 2rem;
    height: 9rem;
}

ul {
    margin: 0 1rem;
}

.links {
    height: 100%;
    display: table-cell;
    vertical-align: middle    
}

.links li {
    height: 100%;
    padding: 0;
    display: inline-block;
    background: #ddd;
}

.links li a {
    padding: 0 2rem;
    background: red;
    display: inline-block;
    height: 100%;
}

HTML：

<div class="menu">
    <div class="logo">logo</div>
        <ul class="links">        
            <li><a href="#">t</a></li>
            <li><a href="#">t</a></li>
            <li><a href="#">t</a></li>
        </ul>
</div>

Answer 1

请执行以下操作：

.links li a {
    padding: 100% 2rem;
    background: red;
    display: inline-block;
}

fiddle

CSS - 垂直对齐文本（表的孙子）？

1 个答案: