Centrar elementos con CSS


La maquetacion web con hojas de estilos ( CSS ) puede llegar a ser mas complicada que si lo hacemos de la forma tradiccional con tablas y es que el mayor problema a la hora de definir la forma de un documento con CSS es que no todas las propidades CSS se comportan igual o no son validas para todos los navegadores.

A esto hay que sumar bugs que algunos navegadores tienen y que tenemos que solucionar mediante lo que llaman CSS Hack que son pequeñas alteraciones que incluimos en las hojas de estilo como por ejemplo ocultar ciertas propiedades para un navegador.

El uso de CSS Hack no es muy recomendado pero a veces resulta imposible realizar las cosas de otra manera.

Uno de los asuntos que trae mas quebraderos de cabeza sobre todo a maquetadores que estan acostumbrados a utilizar tablas es el centrado de elementos en un documento.

Hay varios tipos de centrado y metodos para centrar los elementos con CSS y XHMTL pero muchos de ellos no funcionan correctamente en la mayoria de los navegadores modernos. Voy a explicar y poner un ejemplo de los distintos tipos de centrados con los que nos podemos encontrar y que funcione en la mayoría de los navegadores.

Centrado horizontal de texto.
Si queremos centrar texto horizontalmente basta con utilizar la propiedad 'text-align:center' en alguno de los elementos considerados como elementos bloque tales como un P, H1, DIV, etc. Todo el texto sera centrado incluido el de los bloques que esten dentro.

Texto centrado horizontalmente

Resultado:

Texto centrado horizontalmente

Texto centrado horizontalmente
Centrado horizontal de bloques.
Si queremos centrar un bloque (no el texto del bloque) o mejor dicho si queremos que el margen derecho e izquierdo sean iguales debemos utilizar la propiedad 'margin:auto' y asignarle un tamaño. Si no asignamos el tamaño el bloque se expandirá y utilizará el espacio disponible y no parecerá centrado.

.blockcenter{ display: block;
margin-left: auto;
margin-right: auto;
width:200px;
background-color:#FFCCFF;
text-align:center; /*Habilitar si también queremos centrar el contenido.*/ }


Bloque centrado

Resultado:

Bloque centrado

Centrado horizontal de una imagen.
El centrado de una imagen horizontalmente es similar al centrado de un bloque, pero sin necesidad de poner el tamaño.

IMG.imgcenter{
display: block;
margin-left: auto;
margin-right: auto;
}

perro
Resultado:
Imagen centrda

Centrado vertical y horizontal de una imagen (Hack).
Este caso es el más complejo puesto que tenemos que hacer uso de Hack para ocultar o visualizar propiedades para un determinado navegador. Podrás encontrar otras formas de centrar una imagen pero muchas de ellas no funciona si no conoces los tamaños de la imagen, mientras que este ejemplo no es necesario definir los tamaños de la imagen.

La solución sería asignar al contenedor la propidead 'display: table-cell'; 'vertical-align: middle' para simular el comportamiento de la celda de una tabla. Esto funciona para navegadores basados en Gecko, Opera 6+, Safari, pero no para IE y Mac.

La idea es crear un pequeño contenedor in-line como por ejemplo un SPAN y asignarle la misma altura que el contenedor padre y usuando de nuevo 'vertical-align:middle'. Eso sí el SPAN tiene que tener como tamaño mínimo 1px para que funcione bien. Si quereis utilizar este mismo código para centrar un bloque sólo funciona con el motor Gecko. Mira más abajo como hacerlo para todos los navegadores.


Resultado

Imagen centrda

Centrar un bloque horizontal y verticalmente (Hack).


Bloque centrado horizontal y verticalmente

Resultado:

Bloque centrado horizontal y verticalmente

Enlaces de interés:
http://www.student.oulu.fi/~laurirai/www/css/middle/
http://phrogz.net/CSS/vertical-align/index.html

Tags: