Centrar las cajas en la página
Uno de los mayores dolores de cabeza es el posicionamiento de bloques (<div>, <section>, <header>, <aside>, etc..) en una ubicación determinada sin que éstos se muevan o descoloquen por cualquier cambio en el contenido anterior o posterior.
Para ello, vamos a ver algunos aspectos a tener en cuenta:
1. Primero vamos a partir de un ancho global fijo de la página, que en este ejemplo será de 1000 píxeles. A partir de esta medida general (del <body>) el resto de bloques se centrarán según su propia anchura.
En el CSS definimos la anchura del <body> y el posterior centrado de los bloques que contenga el <body> (que serán todos):
body{
width:1000px;
margin:0px auto;
}
Los dos valores de la etiqueta margin son, el primero (0px) la separación o margen superior que tendrá el primer bloque respecto al borde superior de la página y la separación que tendrá el último bloque del <body> respecto al límite inferior, mientras que el valor auto indica que todos los bloques del <body> tendrán un margen horizontal automático y que por lo tanto estarán centrados (aunque OJO no necesariamente su contenido).
Ejemplo práctico de centrado
Para verlo a través de un ejemplo práctico vamos a suponer que tenemos dentro del <body> tres bloques o <divs> (a los que les pondremos un fondo de color para poder ver su tamaño).
El primer bloque tiene un contenido formado por varias líneas de texto.
El segundo está compuesto por una imagen y un texto (alineados con <img .... align="center">)
El último está formado por varios bloques alineados con float:left;
Con el código CSS del apartado anterior, estos tres bloques están centrados respecto al <body>, aunque no el contenido que contienen. Es decir, las cajas están centradas en la ventana del navegador, pero lo correcto sería que el contenido que contiene cada una de las cajas o bloques también
estuviera centrado dentro de la propia caja.
Bloque 1
Este bloque (o <div>) contiene varias líneas de texto
Estas dos líneas están separadas entre sí utilizando las etiquetas <br> y <p>,
ambas están contenidas dentro del mismo <div>.
Bloque 2:
Bloque 3 (contiene dos <divs> ubicados con float:left)
Centrar el contenido con text-align
El contenido se puede centrar de diferentes maneras (dentro del <div>). Posiblemente, la manera más sencilla es utilizando la propiedad CSS text-align: center, que aunque vale tanto para centrar texto como imágenes, no funciona cuando el contenido está alineado con float.
En el siguiente ejemplo vemos como están centrados correctamente los dos primeros tipos de contenido (texto y texto con imagen), pero al llegar al último bloque que contiene varios <divs> alineados con float, el centrado sólo afecta al <div> que contiene el texto (que es justamente al que no se le aplica la propiedad float).
Bloque 1
Este bloque (o <div>) contiene varias líneas de texto
Estas dos líneas están separadas entre sí utilizando las etiquetas <br> y <p>,
ambas están contenidas dentro del mismo <div>
Bloque 2:
Bloque 3 (contiene dos <divs> ubicados con float:left)
Centrar un contenido alineado con float
En este caso no centramos el contenido dentro de la caja contenedora, sino que centramos la caja contenedora en la ventana del navegador. Para ello debemos:
- Los <divs> que están alineados con float deben estar contenidos en un <div> contenedor.
- En este ejemplo, sería el cuadro de color de fondo naranja.
- Este <div> contenedor tiene que tener un ancho exacto al del contenido que contiene (width).
- Si cada imagen tiene un width de 200px y en ambas el margen horizontal (margin-right) es de 10px, el width del <div> naranja sería de 220px.
- A través de CSS a este <div> contenedor se le deben aplicar las propiedades margin-left y margin-right con el valor: auto en ambos casos.
En nuestro ejemplo el <div> que contiene la imagen del elefante tiene el id="bloque1" y el que contiene al león id="bloque2".
Ambos <divs> están contenidos dentro de un <div> llamado id="contenedor".
Como los <divs> bloque1 y bloque2 tienen una anchura (width) de 200 píxeles (cada uno), y ambos tienen un margen derecho (margin-right) de 10 píxeles cada uno, la suma: 200 + 10 + 200 + 10 = 420, nos da una anchura total de 420 píxeles, que aplicamos al <div> con id ="contenedor".
Al mismo tiempo, para que ese bloque se centre respecto a la anchura que tiene el <body> se le aplican márgenes horizontales automáticos.
#contenedor{
width: 420px;
margin-left: auto;
margin-right: auto;
}
