如何使用不同字体大小的垂直和内联容器居中？

Question

我刚刚发现了display: table和display: table-cell; vertical-align: middle方法来对齐divs的div。

我在我的代码的许多地方使用它，但我遇到了一个我无法使其工作的特定情况！

当我想垂直对齐包含具有相同font-size的元素的n个元素时，一切正常，但如果我想在一个inline元素上的文本比其他元素更大，则会发生以下情况：

HTML：

<div class="wrapper">
    <div class="menu">
        <div class="left"><span>LEFT</span>
        </div>
        <div class="middle"><span>MIDDLE</span>
        </div>
        <div class="right"><span>RIGHT</span>
        </div>
    </div>
</div>

CSS：

button {
    margin:0;
    padding:0;
    cursor:pointer;
}
.wrapper {
    height: 300px;
    width: 600px;
    background-color:red;
    white-space: nowrap;
}
.menu {
    height: 100%;
    width: 80%;
}
.left {
    height: 100%;
    width: 20%;
    display:inline-table;
    background-color:blue;
}
.middle {
    height: 100%;
    width: 60%;
    display:inline-table;
    background-color:orange;
}
.right {
    height: 100%;
    width: 20%;
    display:inline-table;
    background-color:green;
}
span {
    display:table-cell;
    vertical-align:middle;
}
.middle span {
    font-size:5em;
}

结果：

Here is a JSFiddle showing the issue

如何避免？对于那种情况，可能有比inline-table技巧更好的方法吗？

Answer 1

只需垂直对齐容器的直接子项，在您的情况下，这将完成工作：

.menu > div { 
  vertical-align: middle;
}

Answer 2

另一个解决方案是为跨度添加固定的行高：

.menu span { line-height: 50px;}