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