css - 在流体容器中垂直居中文本

Question

我有一个带有 9 个链接的移动菜单。因此，所有项目必须覆盖页面高度的 11.1%。它有效，没关系。

但 ！我尝试将容器内的链接垂直居中。我尝试过的任何东西都不起作用:(我的问题是垂直百分比是相对于容器的宽度的。

这就是我所在的地方：http: //jsfiddle.net/YNGq2/

#menu {
height : auto;
width : 80%;
z-index : 50;
position: fixed;
top : 50px;
background-color: #FFFFFF;
bottom : 0px;
box-shadow: 1px 1px 5px #c7c7c7;
}


.mmline {
border-bottom : 2px solid #777777;
height : 11.1%;
text-align: center;
font-family: NeutrafaceCondensedThin;
text-transform: uppercase;
font-size: 30px;
    vertical-align: center;
}

和 HTML：

<div id="menu">
<div class="mmline">
    title
</div>
<div class="mmline">
    title
</div>
<div class="mmline">
    title
</div>
<div class="mmline">
    title
</div>
<div class="mmline">
    title
</div>
<div class="mmline">
    bandes dessinées
</div>
<div class="mmline">
    title
</div>
<div class="mmline">
    title
</div>
<div class="mmline">
    title
</div>


</div>

在流体容器中垂直居中的最佳解决方案是什么？

Answer 1

如果您可以在 mmline 内部添加而不是使用 inline-block 属性

.mmline:before{
    content:'';
    display:inline-block;
    width:1px;
    height:100%;
    vertical-align:middle;
}
.mmline span{
    vertical-align:middle;
    display:inline-block;
}

http://jsfiddle.net/xGyTN/