垂直整列順序付けされていないリストのナビゲーションリンク？

Question

私はこの質問が何度も聞かれてきたが、私のケースは少し異なると思う。あなたはアイテムが一つですNAVの一部を見ることができるように

：

<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; 
} 

にレンダリング：

私が働いているサイトのナビゲーションはそのような順不同リストで構成されていますいくつかは2つです。

私は縦に並べることができますか？

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; 
} 

最後の2つのプロパティが正しくinline-blocks要素

Answer 2

それはあなたの<li>のための固定の高さなしでは難しいをレンダリングするIE<8ために必要なインラインハックです。固定された高さを持っている場合は、次のようにします。

<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; 
} 

私はliにp要素を変更しました。それでも動作するはずです。