Question

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

但是！我尝试垂直居中容器内的链接。没有我尝试过的工作:( 我的问题是垂直％是相对于容器的宽度。

#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/

将文本垂直居中于流体容器中

1 个答案: