Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a

Datos de búsqueda

Etiqueta ‘Alineación vertical’

CSS: centrado vertical

Fecha de publicación: 2007/05/07

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%;
}

Ver un ejemplo

Referencias y enlaces relacionados

Datos del artículo:

Información del sitio