Css 如何将不同字体大小的垂直内联容器居中？

我刚刚发现了

display:table

和

display:table单元格；垂直对齐：现在使用中间

方法垂直对齐div

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

当我想垂直对齐n个包含相同

字体大小的元素的元素时，一切正常，但如果我想在一个
内联
元素上的文本比其他元素大，则会发生以下情况：

HTML:

结果:



如何避免这种情况？对于这种情况，也许有比内联表更好的方法？
只需垂直对齐容器的直接子级，在您的情况下，这将完成以下工作：

.menu>div{
垂直对齐：中间对齐；
}
另一种解决方案是为跨度添加固定的线高度：

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

在您的示例中，您可以将
.menu>div{vertical align:middle；}
@RubensMariuzzo Nice谢谢：）不客气，Ludo！你正在使用Chrome应用程序吗？
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;
}

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