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.
- 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:
Publicar un comentario