垂直對齊li的多條線

這就是我想要完成的。我有一個未經過修改的列表作爲水平菜單。的<li>應垂直中間對齊的，就像這樣：垂直對齊li的多條線

 _______________________________________ 
|          | 
|          | 
| [____] [____] [____] [____] | 
|          | 
|_______________________________________|

沒問題，到目前爲止，使用vertical-align: middle和line-height。我們面臨的挑戰是，我希望能夠有兩條線，並讓他們在中間藏漢排列，就像這樣：

 _______________________________________ 
|          | 
| [____] [____] [____] [____] | 
|          | 
|  [____] [____] [____]  | 
|_______________________________________|

至今代碼： HTML

<ul> 
    <li><a href="#">item</a></li> 
    <li><a href="#">item</a></li> 
    <li><a href="#">item</a></li> 
    <li><a href="#">item</a></li> 
    <li><a href="#">item</a></li> 
</ul>

CSS

ul { 
    margin: 0; 
    padding: 0; 
    width: 500px; 
    height: 100px; 
    background: lightblue; 
    text-align: center; 
    list-style: none; 
    vertical-align: middle; 
    line-height: 100px; 
} 
    ul li { 
     display: inline; 
    } 
     ul li a { 
      padding: 5px 15px; 
      margin: 0 10px; 
      background: lightgreen; 
     }

我已經找到this和this，但是這對我也沒有幫助。我創建了single line JSFiddle和multi line JSFiddle。

來源

2013-08-06 LinkinTED

作爲，而老式的，我想我將只使用一張桌子... – Floris

項目的數量是動態的，所以不會很不幸。 – LinkinTED

如果你可以使用一個包裝元素，說<nav>元素，YPU沒有IE7和更早版本支持能做到的，也許這會爲你工作：http://jsfiddle.net/LZfVY/1/

nav { 
    margin: 0; 
    padding: 0; 
    width: 500px; 
    height: 100px; 
    background: lightblue; 
    line-height: 100px; 
    font-size:0; 
    text-align: center; 
} 

ul { 
    display:inline-block; 
    vertical-align: middle; 
    margin: 0; 
    padding: 0; 
    background: lightblue; 
    list-style: none; 
    line-height: 2.2; 
    font-size:16px; 
} 
ul li { 
    display: inline; 
} 

ul li a { 
    padding: 5px 15px; 
    margin: 0 10px; 
    background: lightgreen; 
}

來源

2013-08-06 19:03:27 Alohci

適合我，謝謝。 – LinkinTED

我認爲你所需要做的就是將UL的高度設置爲自動。

ul { 
    margin: 0; 
    padding: 0; 
    width: 500px; 
    height: auto; 
    background: lightblue; 
    text-align: center; 
    list-style: none; 
    vertical-align: middle; 
    line-height: 100px; 
}

看看the JS Fiddle，看看是否這樣做你想要做的。

來源

2013-08-06 18:13:16

'ul'有一個固定的高度（100px）...否則它會起作用。 – LinkinTED

你知道你在UL裏面有兩條線嗎？如果是這樣的話，你可以設置行高爲50px。 –

我希望能夠有1行*或* 2行，抱歉，如果我的初始信息不清楚。 – LinkinTED

將display:table-cell;添加到ul樣式。然後根據需要調整線高度，以確保雙線的適當間距。

來源

2013-08-06 19:00:59 andi

垂直對齊li的多條線

回答

相關問題