css - 如何将具有不同字体大小的垂直 n 内联容器居中？

Question

我今天刚刚发现了垂直对齐 div的display: tableand方法。display: table-cell; vertical-align: middle

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

当我想垂直对齐包含相同元素的 n 个元素时font-size，一切正常，但如果我想要一个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;
}

结果：

这是一个显示问题的 JSFiddle

如何避免这种情况？也许有比inline-table这种情况下的技巧更好的方法？

Answer 1

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

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

Answer 2

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

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