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

Question

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

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

当我想垂直对齐 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;
}

结果:

Here is a JSFiddle showing the issue

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

Answer 1

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

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