CSSのポジショニングアンカーは垂直

Question

を揃え、私は水平ナビゲーション・メニューを作ってるんだ、と私は垂直方向にCSSを使用してdiv要素内のアンカーを中心にしたい、私は何を持っていることはこれです：

<nav id="header-nav"> 
    <ul id="menu-header-menu" class="dropdown dropdown-horizontal"> 
     <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page"> 
      <a href="http://localhost/rototec.com.co/pagina-ejemplo/"> 
       Inicio 
      </a> 
     </li> 
     <li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page"> 
      <a href="http://localhost/rototec.com.co/filosofia-y-politicas-de-calidad/"> 
       Filosofía y políticas de calidad</strong> 
      </a> 
     </li> 
     <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page"> 
      <a href="http://localhost/rototec.com.co/catalogo-de-productos/"> 
       Catálogo de productos 
      </a> 
     </li> 
     <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page"> 
      <a href="http://localhost/rototec.com.co/proceso-de-rotomoldeo/"> 
       Proceso de rotomoldeo 
      </a> 
     </li> 
     <li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page"> 
      <a href="http://localhost/rototec.com.co/contacto/"> 
       Contacto 
      </a> 
     </li> 
     <li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page"> 
      <a href="http://localhost/rototec.com.co/preguntas-frecuentes/"> 
       Preguntas frecuentes 
      </a> 
     </li> 
    </ul> 
</nav> 

今のところ、すべての行高さ（a、li、ul）が15、私のUL高さが45、liが...アンカーの高さが設定されていません。

これは私のCSSです：

ul.dropdown { 
    font: bold 12px tt0142m, FuturaM, "Trebuchet MS", sans-serif; 
    text-transform: uppercase; 
    display: block; 
    height: 45px; 
    padding: 0px; 
    line-height: 15px; 
    vertical-align: bottom; 
/* border: 1px solid green; */ 
} 
ul.dropdown li { 
    padding: 0px; 
    margin: 0px; 
} 
ul.dropdown a { 
    text-decoration: none; 
    vertical-align: middle; 
    color: #000; 
} 

ul.dropdown li { 
    word-wrap: break-word; 
    width: 120px; 
    text-align: center; 
    font: FuturaM; 
    border-left: 2px solid #000; 
    line-height: 15px; 
    height: 45px; 
} 
ul.dropdown > li:last-child { 
    border-right: 2px solid black; 
} 
ul.dropdown li a { 
    display: block; 
    position: relative; 
    text-align: center; 
    vertical-align: middle; 
    color: #000; 
    font-weight: bold; 
} 

ところで、今、すべてのリンクが垂直にあなたがアンカーを縦リーの内に整列したいことを意味と仮定すると、トップ

Answer 1

一つの方法は、テーブルに表示タイプを変更して要素に高さを強制することである

ul.dropdown li { 
display: table; 
min-height: 45px; 
} 
ul.dropdown li a { 
display: table-cell; 
height: 45px; 
vertical-align: middle; 
} 

このようにそれをやっての問題は、IE7とIE6が

ul.dropdown li { 
position: relative; 
display: block; 
} 
ul.dropdown li a { 
position: absolute; 
top: 50%; 
display: block; 
} 
ul.dropdown li a <new extra element that you do not yet have> { 
position: relative; 
top: -50%; 
} 

Answer 2

で並んでいます。.. 。

ul.dropdown li { 
posiiton:relative; 
} 
ul.dropdown li a { 
height:25px; /* change as needed */ 
position:absolute; 
top:10px; /* change as needed */ 
} 

Answer 3

あなたの最善の策は、liのdisplay: table-cell;を作ることであるいくつかの特別なスタイリングを必要とすることです。テーブル要素は、現時点で真ん中のコンテンツを垂直に整列させることができる唯一のオンスです（妥当なサポート範囲内）

ここはa jsfiddle that demonstrates thisです。 display: table-cellはIE7ではサポートされていませんが、IE7でサポートされていない擬似セレクタ:last-childを使用していると、問題があるとは思われません。