CSS - 垂直对齐文本(表格的孙子)？

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