內裏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。 IE7不支持display: table-cell，但我不認爲這對您是個問題，您使用的是僞造選擇器:last-child，IE7也不支持它。