CSS: Centrando texto en ambos sentidos
Trucos CSSSi 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
);
}
Bueno esperio que este pequeño tuto les ayude con sus Textos centrados...
Fuente: El Webmaster
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
);
}
Bueno esperio que este pequeño tuto les ayude con sus Textos centrados...
Fuente: El Webmaster
[Comentarios: 0]
