Desde hace años que me pase a las capas abandonando la maquetación en tablas, si algo he hechado de menos siempre ha sido el «como centrar texto verticalmente sin valign». Para solucionar este problema, siempre he usado subcapas con margin o paddings o directamente padding superior en la capa padre para bajar el texto, aunque eso se comporta de manera distinta dependiendo del navegador. En una pagina que estoy montando me he puesto a investigar, como alguna vez hago con el intellisense mirando todo lo que me encuentro y en esta ocasión le ha tocado el turno al css. Buscando me he encontrado con un atribuo de css que se llama line-height, que agranda la linea del texto a la altura que le indiquemos, lo que quiere decir que si tenemos un menú, de pastillas de 50px de alto y le indicamos que el line-height es 50px, el texto aparecerá centrado. Realmente no es algo milagroso ya que no es dinámico, pero para menús y cosas así viene genial.
Os dejo un ejemplo de como se utilizaría:
Ejemplo del html:
<div id="menu">
<div class="menuOption">Inicio</div>
</div>Ejemplo del css:
#menu {
height: 50px;
}
.menuOption {
line-height: 50px;
text-align: center;
}Con este ejemplo anterior, nos dibujaría una pastilla (mas o menos) y nos dejaría el texto centrado verticalmente y ya de paso centrado horizontalmente también.
