CSS Positionierung Anker innen li vertikal

Question

ausgerichtet

Ich bin eine horizontale Navigationsmenü zu machen, und ich möchte, vertikal die Anker in den divs zum Zentrum mit CSS, was ich habe, ist dies:

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

Gerade jetzt alle Linie höhen (a, li und ul) sind 15, meine UL-höhe ist 45 und so ist das li ... die ankerhöhe ist nicht festgelegt, wie kann ich sie vertikal zentrieren?

Das ist mein 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; 
} 

By the way, jetzt alle Links vertikal an der Spitze

Answer 1

Eine Möglichkeit ist, den Anzeigetyp zu Tabelle zu ändern und Höhen dann auf die Elemente zwingen

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

Das Problem mit ihm, wie dies zu tun ist, dass IE7 und IE6 einige spezielle Styling brauchen

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

Unter der Annahme ausgerichtet sind, Sie bedeuten, dass Sie die Anker vertikal ausgerichtet in der li wollen .. .

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

Answer 3

Ihre beste Wette display: table-cell; die li s zu machen. Tabellenelemente sind die einzigen Onces, die den Inhalt in der Mitte im Moment vertikal ausrichten können (innerhalb angemessener Unterstützung).

Hier ist a jsfiddle that demonstrates this. display: table-cell wird nicht von IE7 unterstützt, aber ich denke nicht, dass das ein Problem für Sie ist, dass Sie den psuedo-Selektor :last-child verwenden, der auch nicht von IE7 unterstützt wird.