Una vez más vengo con una técnica que de tan simple dan ganas de llorar por no habérsenos ocurrido antes. Lo que mostraré ahora, es cómo lograr centrar verticalmente un texto a través de su contenedor. Esta es la clave, ya que se suele pensar que el texto mismo es el que debe tener la propiedad de alineado vertical pero la idea, al igual que el [artículo anterior de centrado horizontal][1], es que el contenedor permita hacerlo, así cualquier elemento que esté dentro pueda tener esta cualidad.

La clave: la propiedad line-height. Definiento un alto de línea fijo para el contenedor, podremos lograr que todos sus elementos queden centrados relativos a él, ya que al contrario de height, siempre sus elementos hijos quedarán centrados verticalmente. Esto funciona para cualquier etiqueta bloque: ,

,

  • , etc.

    El CSS es el siguiente:

    li, td, p {
       line-height: 100px;
    }

    O sea, si el contenedor es un

  • , un o un

    (pueden ser muchos otros), defino el alto de éste mediante line-height (en vez de hacerlo mediante height) y todos sus elementos de texto y botones quedarán automáticamente centrados verticalmente.

    [Ver ejemplo][2]{.verejemplo}

    El único problema… si… ese mismo… IE6 y las etiquetas de botones