Si 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
Martes, 19 de Mayo de 2009 a las 13.36
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!!!!
Martes, 19 de Mayo de 2009 a las 13.39
Aclaro que css no es un leguaje de programacion, por las dudas.
Otra cosa la sentencia:
display: table-cell;
Es de CSS3?
gracias!
Saludos!
Viernes, 29 de Mayo de 2009 a las 19.09
Gracias por el tip, ahora lo estoy probando para dejar mensajes dentro del blog, pero que resalten de todo el contenido ^^
Lunes, 12 de Abril de 2010 a las 00.25
En IE8 no me centra un div de esta maneta
.clase{
margin:0 auto;
}
porque? alguien que me ayude