水平菜單中文本的垂直對齊

我有一個菜單，其中一些鏈接是一行，一些是2. 我找不到垂直對齊文本的方式，它粘在頂端。任何想法如何解決我的代碼將是偉大的。水平菜單中文本的垂直對齊

的CSS：

ul { 
    margin: 0; 
    padding: 0; 

} 
ul.menu { 
    height: 100px; 
    border-left: 1px solid rgba(0,0,0,0.3); 
    border-right: 1px solid rgba(255,255,255,0.3); 
    float:left; 
    display: table-row; 
} 

ul.menu li { 
    list-style: none; 
    float:left; 
    height: 99px; 
    text-align: center; 
    display: table-cell; 
    vertical-align: middle; 
    background: rgba(191,232,108,1); 

    } 

ul li a { 
    display: block; 
    padding: 0 20px; 
    border-left: 1px solid rgba(255,255,255,0.1); 
    border-right: 1px solid rgba(0,0,0,0.1); 
    text-align: center; 
    height:99px; 
    text-decoration: none; 
    font-family: Georgia, "Times New Roman", Times, serif; 
    font-size: 21px; 
    color: #371C1C; 
    background : rgb(168,168,168); 

    } 

ul li a:hover { 
    background: transparent none; 
    color: #fff; 
} 

ul li.active a{ 
    color: #0f0; 
    background:rgba(31,169,244,1); 
} 
span { 
    display: table-cell; 
    vertical-align: middle; 
    }

的HTML，在這裏我想一些方法來打破行：

<div class="wrapper"> 
<div class="container"> 
<ul class="menu"> 
<li class="active"><a href="#">Home</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Contacts</a></li> 
<li><a href="#"><span>bla bla<br/> blabla bla</span></a></li> 
<li><a href="#">Twitter bla<br/> blabla bla</a></li> 
<li><a href="#">Twitter bla blabla bla</a></li> 

</ul> 
</div> 
</div>

來源

2013-02-11 Naomi

移動：

display: table-cell; 
vertical-align: middle;

..into到A - 標記CSS聲明，並且出LI。

一般而言，如果將所有樣式（除display:position:和float:以外）放在A標籤上而不是列表中，則總體上會少一些麻煩。

請參閱我的教程，I Love Lists。

來源

2013-02-11 20:37:53

偉大的答案感謝相同的高度，完美的作品。也喜歡這個教程。你改變了我的生活。 – Naomi 2013-02-12 16:22:04

英雄職位。多謝兄弟。 – SC1988 2015-07-21 03:49:51

謝謝你讓我回到這個。這恰好是我正在從事的工作的及時解決方案。 – 2015-07-21 17:49:46

你可以讓你的a標籤的行高你li的

來源

2013-02-11 20:45:07 Luke

根據我的經驗，此解決方案對於2行或更多的菜單項不起作用。 – Naomi 2013-02-12 16:25:13

這也許是真的，我只是不喜歡在表格外使用表格樣式。沒有錯，它只是打破慣例。 – Luke 2013-02-12 17:03:56

-2

<div id="midalign"> 
    <ul> 
     <li><a>Home</a></li> 
     <li><a>About Us a very long link </a></li> 
     <li><a>Forum</a></li> 
    </ul> 
</div> 

CSS code: 
#midalign ul { 
    display:table-cell; 
    vertical-align:middle; 
    list-style:none; 
    height:100px; 
} 

#midalign li { 
    float:left; 
    margin-right:30px; 
    width:100px; 
}

來源

2013-03-27 01:48:44 Jennift

水平菜單中文本的垂直對齊

回答

相關問題