在流暢競爭者中豎直放置一個文本

Question

我有一個包含9個鏈接的移動菜單。 因此，所有項目必須覆蓋頁面高度的11.1％。 它的工作原理，沒關係。

但是！ 我嘗試以垂直方式將角色中的鏈接居中。並沒有什麼，我試圖作品:( 我的問題是，垂直％是相對於contener的寬度

這裏就是我'：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> 

什麼是你最好的解決方案，讓你在一個液體競爭對手verticaly？ 謝謝！

Answer 1

如果你ca ñ內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/