I'm making a horizontal navigation menu, and i want to center vertically the anchors inside the divs using CSS, what i have is this:
<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>
Right now all line heights (a, li and ul) are 15, my UL height is 45 and so is the li... the anchor height is not set, how can i make them center vertically?
This is my 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, right now all the links are vertically aligned at the top
One way is to change the display type to table and then force heights on the elements
ul.dropdown li {
display: table;
min-height: 45px;
}
ul.dropdown li a {
display: table-cell;
height: 45px;
vertical-align: middle;
}
The problem with doing it like this is that IE7 and ie6 need some special styling
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%;
}