Outbook

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

Inicio que contiene a Desarrollo web que contiene a CSS que contiene a CSS: centrado vertical

Datos de búsqueda

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

Ver un ejemplo

Referencias y enlaces relacionados

Compartir este artículo:

  • Compartir en del.icio.us
  • Compartir en Technorati
  • Añadir a Google Bookmarks
  • Compartir en Google Buzz

Datos del artículo:

Comentarios del artículo

Los comentarios están cerrados.

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.

Los comentarios están cerrados.

Información del sitio