Micaela 19 de mayo de 2009 a las 11.18
   Imprimir artículo
elWebmaster.com

CSS: Centrando texto en ambos sentidos


css-alinearSi s贸lo tienes una palabra suelta o una sola l铆nea de texto, existe una forma inteligente de centrarla verticalmente en un bloque con CSS. Programas la altura del texto (line-height) para que sea igual a la altura (height) de la caja. Funciona perfectamente, a menos que el texto necesite ser envuelto.

Un globo de di谩logo es el ejemplo cl谩sico de un lugar donde podr铆as desear que el texto est茅 centrado tanto horizontal como verticalmente y sea adaptable a m煤ltiples l铆neas. Hay un peque帽o y sencillo truco CSS para esto…

El HTML no es nada elegante. El “谩rea” es simplemente la regi贸n con la que estamos trabajando, donde podemos programar la posici贸n (position: relative); para poder posicionar absolutamente el texto que est谩 dentro del globo.

<div class="area">
      <div class="bubble">
          <p>To look best, text should really be centered inside this bubble both vertically and horizontally.</p>
      </div>
</div>

El globo (en el c贸digo lo llamaremos “bubble”) lo programaremos para que se muestre como una tabla, que en verdad no hace mucho por s铆 misma, pero podemos programar el elemento <p> adentro para que sea una celda de la tabla; lo que nos permite utilizar sobre 茅l la propiedad de alineaci贸n vertical.

.area {
  width: 300px;
  height: 300px;
  background: url(../images/abe-bg.png) no-repeat;
  position: relative;
}

.bubble {
  position: absolute;
  left: 93px;
  top: 21px;
  width: 135px;
  height: 84px;
  display: table;
}

.bubble p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

Esto genera los resultados esperados y en pocos minutos.

驴Qu茅 pasa con IE <= 7?

IE 8 soporta tablas CSS, pero IE 7 y las versiones anteriores no lo hacen. Por lo que a continuaci贸n les dejo el parche para hacer que funcione a la perfecci贸n en IE 6 y 7:

.bubble p { position: relative; font-size: 11px;
margin-top: inherit;
*clear: expression(
style.marginTop = "" + (offsetHeight < parentNode.offsetHeight ? parseInt((parentNode.offsetHeight - offsetHeight) / 2) + "px" : "0"),
style.clear = "none", 0
);
}

Fuente: CSS-Tricks


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (4)

  1. Luis dice:

    Me parece a mi o se viene CSS3 con todo, es mas ya se va a parecer a un “lenguaje” de programacion, con tantas funcionalidades.

    Hoy estuve parchando el problema del png transparente en IE6 y la verda que habian algunas cosillas que no conocia.

    Por suerte esta EL WM! jajajajaja

    Saludos!!!!

  2. Luis dice:

    Aclaro que css no es un leguaje de programacion, por las dudas.

    Otra cosa la sentencia:

    display: table-cell;
    Es de CSS3?
    gracias!
    Saludos!

  3. danielmd dice:

    Gracias por el tip, ahora lo estoy probando para dejar mensajes dentro del blog, pero que resalten de todo el contenido ^^

  4. ilen dice:

    En IE8 no me centra un div de esta maneta

    .clase{
    margin:0 auto;
    }

    porque? alguien que me ayude

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder