Centrando texto verticalmente

19/mar/2008 11

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, 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: <td>, <p>, <li>, etc.

El CSS es el siguiente:

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

O sea, si el contenedor es un <li>, un <td> o un <p> (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

El único problema… si… ese mismo… IE6 y las etiquetas de botones <button> e <input />. Como se darán cuenta, no lo hace del todo bien. Lo siguen IE7 y Opera. Pero hay una manera de solucionarlo mediante CSS pero sólo para IE7 y Opera: definir el alto fijo de los botones mediante height. Pero con IE6 no hay caso, no lo soluciona.. Otro detalle es que no funciona con imágenes <img />. Siento mucho si se decepcionaron leyendo estas últimas palabras… tiene sus limitaciones, pero puede salvar en algunas situaciones.

Comentarios

  1. EMQ [#]

    Hola,

    Existe alguna forma de centrar un div verticalmente, sin conocer la altura del mismo? es decir, que la altura sea variable?

  2. fearlex [#]

    Pues si, puede salvar en muchas ocasiones, siempre es bueno tenerlo a la mano, y es super facil. Y me uno a la pregunta del amigo anterior, any idea ?

  3. Javier Seixas [#]

    Lástima que no funcione como el vertical-align en una celda.

    El sistema funciona si quieres centrar una sola línea de texto. A la que el texto és más de una, entre una y otra se interponen 100px (como es lógico) y el diseño queda perjudicado.

    Pese a ello, es bueno conocer este truco :-)

  4. chremon [#]

    Ufff, es muy grande y sencillo, realmente me he puesto rojo por no haberlo pensado antes.

    Muchas Gracias

    Contestando a Javier

    Si metes lo que quieres centrar dentro de un contenedor “div” puedes centrar lo que sea, creo. ^^

  5. Diurno [#]

    Que buena onda, me salvaste en esta maquetación… ya me había pasado bastante tiempo buscando la manera de centarla, gracias!.

  6. VamosRiver [#]

    Funciona para Internet Explorer 7? Lo probe y no anduvo…

  7. dark_nexus [#]

    en caso de que el texto sea mas largo que el contenedor, la siguiente linea aparecera muy abajo…. haz alguna forma de que se centre automaticamente… teniendo una estructura de este tipo…
    text el div es absolute con un tamaño fijo… lo que no es fijo es el tamaño o longitud del texto… como lo podria solucionar?

  8. dark_nexus [#]

    upss.. creo que no sale el html 😛 hehe era algo asi texto

  9. dark_nexus [#]

    jope no sale ninguna tag .. :S (div)(p)texto(/p)(/div) ahahhahaa

  10. Javier [#]

    Lo mejor para centrar un li es colocar la imagen del bullet como fondo y dejar los li como bloques, mejor les paso el código:

    li {
    list-style-type: none;
    line-height: 17px;
    display: block;
    background-image: url(images/xxx.gif);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 10px;
    }

  11. Centrando texto verticalmente II ↝ CSSLab [#]

    […] sino la propiedad CSS display: table. Aquí presento una técnica sencilla y rápida que permite centrar verticalmente cualquier bloque de texto dado cierto elemento HTML con alto […]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab