martes, 8 de abril de 2008

Centrado vertical en CSS

Para el centrado vertical en CSS podriamos pensar en alguna propiedad. Por ejemplo vertical-align no centra vertical en se siguiente caso.

Problema
  • Existe una capa con un alto fijo conocido con la propiedad height.
  • Existe una capa en que el contenido se genera dinámicamente con un alto no conocido.
  • El objetivo es centrar la capa de contenido dinámico en la capa de alto fijo.
  • Es necesario únicamente CSS siendo semánticos y sin utilizar tablas.
Enfoque
  • Buscamos una solución que funcione tanto en estándares cómo en navegadores antiguos.
  • Para explorer tenemos que introducir el parametro top y capas intermedias.
  • Para estándares utilizamos display table y display table-cell.

Solución
  #outer {height: 400px; overflow: hidden; position:   relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}

#inner {position: relative; top: -50%} /* for explorer only */
/* optional: #inner[id] {position: static;} */

No hay comentarios: