垂直排列無序列表導航鏈接？

Question

我看到這個問題已被多次提出，但我認爲我的情況稍有不同。

<div class="nav_root nav_area_top"> 
    <ul class="nav_root_wrap"> 
     <li class="nav_parent first"> 
      <a href="california.providence.org/torrance/pages/Locations.aspx"> 
       Locations 
      </a> 
     </li> 
     <li class="nav_parent first"> 
      <a href="california.providence.org/torrance/pages/Locations.aspx"> 
       Health Services 
      </a> 
     </li> 
    </ul> 
</div> 

... 

.nav_area_top ul.nav_root_wrap > li 
{ 
    background-image: url(../images/vert_bg_blue.jpg); 
    background-color: #0C83BB; 
    padding: 4px 15px 4px 15px; 
    float: left; 
    font-size: 13px; 
    margin-left: 3px; 
    -moz-border-radius: 5px 5px 0 0; 
    -webkit-border-radius: 5px 5px 0 0; 
    border-radius: 5px 5px 0 0; 
    min-height: 36px; 
    text-align: center; 
    border: 0px; 
} 
.nav_area_top ul.nav_root_wrap > li > a 
{ 
    color:#fff; 
    padding: 0px; 
    line-height: 18px; 
} 

這使得到：

對我工作的網站導航與無序列表，像這樣建造

正如你可以看到一些導航項目之一線和一些是兩個。

我可以垂直對齊：中間的一行項目？

Answer 1

（如有必要重寫）添加這種風格

.nav_area_top ul.nav_root_wrap > li { 
    line-height: 36px; 
} 

.nav_area_top ul.nav_root_wrap > li > a { 
    line-height: normal; /* or just choose another value: e.g. 1.5; */ 
    vertical-align: middle; 
    display: inline-block; 
    *zoom: 1; 
    *display: inline; 
} 

最後兩個屬性是必要的IE<8在線黑客正確呈現inline-blocks元素

Answer 2

很難不爲你<li>一個固定的高度。如果你確實有一個固定的高度，你可以：

<style> 
     #centerMe{ 
      line-height:4em 
      } 
</style> 

<p id="centerMe"> 
    This line is vertically centered! 
</p> 

你會設置你喜歡的線高度。

我也看到了這個來自Nerds to Geeks：

#container li{ 
display: table-cell; 
vertical-align: middle; 
text-align: center; 
font-size:28px; 
} 

我改變了p元素li;它應該仍然有效。