在保持href塊的同時，用雙線垂直居中導航列表？

Question

所以我有一個基本的導航列表欄。但是有些項目有兩行文字。

我想垂直對齊：在文本中間，仍然可以懸停並單擊列表塊。

HTML：

<div class="nav"> 
<ul> 
    <li><a href="/">Home</a></li> 
    <li><a href="/">Some Text</a></li> 
    <li><a href="/">Double<br>Line</a></li> 
    <li><a href="/">Something</a></li> 
</ul> 
</div> 

CSS：

.nav li { 
    float: left; 
} 

.nav a { 
    background: #000; 
    display: block; 
    padding: 10px; 
    text-decoration: none; 
    border-right: 2px solid #fff; 
    font-size: 14px; 
    text-align: center; 
    color: #fff; 
} 
.nav a:hover { 
    background: yellow; 
    color: #000; 
} 

這可能是最好的解釋是：http://jsfiddle.net/ZmpXM/

乾杯

Answer 1

這不是動態的，但你可以做到這一點通過增加

height: 34px; 
display: table-cell; 
vertical-align: middle; 

您.nav a風格

http://jsfiddle.net/ZmpXM/1/