Esta es una de las preguntas más recurrentes entre los diseñadores web que trabajan con HTML y CSS. Cuando trabajábamos con la web 1.0 y utilizábamos tablas, era algo relativamente sencillo, insertábamos una tabla dentro de una celda, le aplicábamos alineación vertical a la celda y la tabla nos quedaba centrada dentro de la misma. Luego, dentro de la tabla podíamos colocar los elementos que quisiéramos y así tenerlos centrados verticalmente en relación a su objeto padre.

Este método perdió validés desde el momento que empezamos a respetar la semántica del HTML y separar el contenido del diseño utilizando hojas de estilo. Esto significa que para posicionar uno o varios elementos que no requieren tabulación, lo correcto es utilizar Divs y no tablas; por esta razón es que dependiendo de las propiedades de los DIVs, dejó de ser algo sencillo centrar contenido verticalmente.

Está claro que si utilizo la propiedad “margin” puedo ubicar un contenido a determinada distancia; pero no será flexible si el elemento contenedor cambia su altura.

En el ejemplo que veremos, aparecerán centrados en la página, un logo junto a dos textos de selección de idioma; estos elementos deberán quedar centrados verticalmente independientemente del tamaño que tenga la ventana del navegador.

CSS

html, body { background: #b2ab56; margin: 0; height: 100%; width: 100%; font-family: Verdana; font-size: 0.9em; color: white; }
img { border: none; }
#container { height: 100%; width: 100%; text-align: center; display: table; }
#bloque { display: table-cell; vertical-align: middle; margin: 0 auto; width: 100%; }
#logo { width: 100%; margin-bottom: 10px; }
#description { text-align: center; }
#description a { color: white; }
#description a:hover { color: #e1deb8; }

Cómo comentamos anteriormente, las tablas tenían la capacidad de centrar los elementos de su contenido, por esta razón en CSS lo que haremos será decirle a los DIVs que se comporten como tabla y celda; para luego indicarle la posición media a nivel vertical.

Lo primero que debemos hacer es indicar que tanto la etiqueta html como la etiqueta body tengan un alto del 100%. Por defecto estas etiquetas traen un alto igual al alto de línea por defecto. Luego de esto creamos un contenedor con un ancho y alto de 100%, alineamos su contenido al centro a nivel horizontal y le decimos que se comporte como una tabla con la propiedad display: table.

Posteriormente crearemos el bloque que hará las veces de celda; para ello usamos la propiedad display: table-cell. En este bloque también indicamos que su contenido aparezca centrado verticalmente, vertical-align: middle.

Como se habrán dado cuenta, en este último bloque es dónde deberemos colocar los elementos que visualmente queramos ver centrados verticalmente, en este caso el logo de ABC y los textos con los vínculos para la selección de idioma.

Comentarios if


¿Porqué necesito los condicionales?… porque algunas versiones de Internet Explorer no soportan las propiedades display: table y display: table-cell. Para esto, lo que hacemos es volver a definir las propiedades de los ID #container y #bloque, para el IE.
Los condicionales son comentarios que sólo puede leer el IE, por lo tanto, todos los demás navegadores se inmutarán con este código, en cambio el IE sí los reconocerá y tomará como código HTML. Así que defino la etiqueta style para colocar las dos líneas de código CSS.
En este caso la lógica cambia, ahora daremos posición absoluta al bloque que contiene los elementos principales y lo pondremos a un 50% del top. Claro que ese 50% será contado desde la parte superior del bloque, es por esta razón que le aplicamos la propiedad margin-top: -50px, dónde le restamos la mitad del alto aproximado del Div.

HTML

Arriba pueden ver el código HTML de la página y debajo dos links para que puedan ver y descargar el ejemplo detallado.

¡Hasta pronto!

Ver ejemplo
Descargar ejemplo

Categoría: Tutoriales, Web

Publicado por: negro

Entradas más populares

Dejar una respuesta

XHTML: Tu pudes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>