CSS: centrado vertical
Supongamos que tenemos un párrafo (elemento P) dentro de una capa (elemento DIV) y quueremos una alineación vertical centrada para el párrafo dentro de esa capa.
Existe una solución con CSS: display:table;. Pero tiene el problema habitual de CSS: el excelente soporte de CSS en Internet Explorer, que, para variar, no es compatible con display:table;.
Pero utilizando algunos hacks CSS y metiendo una capa adicional se puede dar solución al centrado vertical, manteniendo compatibilidad con la mayor parte de los navegadores.
Este sería el HTML:
<div class="t1">
<div class="t2">
<p>Párrafo a centrar</p>
</div>
</div>
Y este el CSS:
div.t1 {
height:12em; /*Altura de la capa*/
overflow:hidden;
position:relative;
}
html>/**/body div.t1 {
display:table;
position:static;
}
div.t2 {
position:absolute;
top:50%;
}
html>/**/body div.t2 {
display:table-cell;
position:static;
vertical-align:middle;
}
p {
position:relative;
top:-50%;
}
Referencias y enlaces relacionados
Datos del artículo:
- Publicado el Lunes 7 de mayo de 2007 a las 10:15
- Archivado en CSS, Desarrollo web, XHTML
- Etiquetas: Alineación vertical
- Seguimiento de comentarios (RSS 2.0).
Comentarios del artículo
Puedes comentar o hacer trackback desde tu propio sitio web.
Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.
Todavía no hay comentarios.










