CSS позиционирование якоря внутри лития вертикально

Question

Делаю горизонтальное меню навигации, и я хочу, чтобы отцентрировать вертикально якоря внутри дивы с помощью CSS, то, что у меня есть это:

<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, и так ли ... высота анкера не установлена, как я могу сделать их центрированными по вертикали?

Это мой 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 s display: table-cell;. Элементы таблицы являются единственными единицами, которые могут вертикально выравнивать содержимое в середине на данный момент (в пределах разумной поддержки).

a jsfiddle that demonstrates this. display: table-cell не поддерживается IE7, но я не думаю, что это проблема для вас, вы используете селектор psuedo :last-child, который также не поддерживается IE7.