垂直對齊多行文本（菜單元素）？

我試圖垂直對齊UL中的文本。問題是某些列表項有多行文本，因此無法使用行高。垂直對齊多行文本（菜單元素）？

這是我想達到的效果：http://img402.imageshack.us/img402/7979/menuor.jpg

這裏是我的HTML：

<ul class="menu"> 
    <li> <a href="#"><span>WHAT IS TEAM X?</span></a> </li> 
    <li> <a href="#"><span>COMPANY BENEFITS</span></a> </li> 
    <li> <a href="#"><span>COMPANY, COMPANY DATA</span></a> </li> 
    <li> <a href="#"><span>TEAM X COVERAGE</span></a> </li> 
    <li> <a href="#"><span>COMPANY2 </span></a> </li> 
    <li> <a href="#"><span>COMPANY3 </span></a> </li> 
    <li> <a href="#"><span>LATEST CAMPAIGNS</span></a> </li> 
    <li> <a href="#"><span>CONTACT</span></a> </li> 
</ul>

這裏的CSS：

.menu { 
    float: left; 
    margin: 0px 0px 0px 0px; 
    width: 720px; 
} 
.menu li { 
    float: left; 
    position: relative; 
} 
.menu li a { 
    width: 86px; 
    height: 52px; 
    padding: 15px 0px 15px 4px; 
    display: block; 
    float: left; 
    color: #fff; 
    font-size: 14px; 
    font-weight: bold; 
    text-decoration: none; 
    background-color: #ccc; 
} 
.menu li a:hover { 
    background-color: #000; 
}

謝謝！克里斯

來源

2011-06-12 Cris

你想如何垂直對齊它們（例如頂部，中間，底部）？ – melhosseiny 2011-06-12 18:24:26

我希望他們在中心。我添加了一張照片來描述我想要的內容：http://img402.imageshack.us/img402/7979/menuor.jpg – Cris 2011-06-12 18:53:52

添加這些聲明的.menu li a規則：

display: -webkit-box; 
display: -moz-box; 
display: box; 
-webkit-box-align: center; 
-moz-box-align: center; 
box-align: center;

查看更新後的fiddle。

08/14/13查看此answer獲取當前語法。

來源

2011-06-12 18:55:59 melhosseiny

美麗的作品！它在中間垂直對齊，就是我需要它的方式。你爲我節省了很多時間！關於其他評論：它只需要「文本對齊：中心」的文字在中間。再次感謝！ – Cris 2011-06-12 19:06:07

我檢查過，它只能在Chrome中使用。 Firefox，Opera和IE不正確？有什麼建議麼？謝謝。 – Cris 2011-06-14 08:59:12

在指出瀏覽器支持的情況下建議Flexbox有點不負責任：http://caniuse.com/flexbox（*爲什麼我要這麼說？* http://stackoverflow.com/questions/6342755/how-to-vertically - 中心 - 多於一行的文本 - 僅在Chrome上） – thirtydot 2011-06-14 11:47:06

這裏是updated fiddle

來源

2011-06-12 18:22:36

我認爲他的意思是裏面的文字必須水平排列，這樣看起來像是在同一行/行！ – Jawad 2011-06-12 18:33:00

是的，這就是我的意思;我希望裏面的文字垂直對齊，以免混淆。這是我想要的圖像：http://img402.imageshack.us/img402/7979/menuor.jpg – Cris 2011-06-12 18:53:04

這不是做最漂亮的事情，如果是動態生成的鏈接，它不會工作，但你可以只用再一個或兩行的跨度添加特殊班在頂部添加一些padding以居中文本。

.oneLine {display:block; padding-top:1.25em;} 
.twoLines {display:block; padding-top:.75em;} 

<ul class="menu"> 
    <li> <a href="#"><span class="twoLines">WHAT IS TEAM X?</span></a> </li> 
    <li> <a href="#"><span class="twoLines">COMPANY BENEFITS</span></a> </li> 
    <li> <a href="#"><span>COMPANY, COMPANY DATA</span></a> </li> 
    <li> <a href="#"><span>TEAM CYCAD COVERAGE</span></a> </li> 
    <li> <a href="#"><span class="oneLine">COMPANY2 </span></a> </li> 
    <li> <a href="#"><span class="oneLine">COMPANY3 </span></a> </li> 
    <li> <a href="#"><span class="twoLines">LATEST CAMPAIGNS</span></a> </li> 
    <li> <a href="#"><span class="oneLine">CONTACT</span></a> </li> 
</ul>

http://jsfiddle.net/jasongennaro/4MWTj/

來源

2011-06-12 18:54:13

垂直對齊多行文本（菜單元素）？

回答

相關問題