css: centrado vertical

height #padre = line-height #hijo autor: McPinkY18

by cristian_cena

HTML

<ul id="menu">
    <li><a href="#" title="">Link I</a></li>
    <li><a href="#" title="">Link II</a></li>
    <li><a href="#" title="">Link III</a></li>
</ul>

CSS

/*para centrar verticalmente se usa el mismo valor del height elemento padre en el elmeento hijo
asi
{height:35px;line-height:35px;}

muy importante que el line-height lo coloques luego del font-size 

y si usas un fondo puedes colocar la propiedad
background-position: 0px center;
*/

  * {margin:0;padding:0;}
    body {font:normal 14px/20px arial;color:#444;}
    #menu {overflow: hidden;}
    #menu li {display: inline;}
    #menu li a {
    font-size:16px;
    display:block;
    float:left;
    height:50px;
    padding:0px 10px 0px 40px;
    line-height:50px;
    color:#FFF;
    background: #222 url(http://cdn1.iconfinder.com/data/icons/prettyoffice/24/info-.png) no-repeat 10px center scroll;
    text-decoration:none;
}
    #menu li a:hover {background-color:#aaa;}

JavaScript

/*
reconocimiento de autorĂ­a: 
McPinkY18, http://www.forosdelweb.com/f53/alinear-texto-vertical-915249-post3865361/#post3865366
*/