Zumbe.net

Comenzando a programar una web

Centrar contenedores en CSS

Puede que muchos no lo sepáis, pero centrar contenedores (elementos block) en css no basta con centrar el texto en el elemento que lo contiene. A continuación muestro la forma correcta de centrar bloques con CSS.

Lo que solemos hacer para centrar un div (o cualquier otro elemento de bloque) es aplicar la propiedad

text-align: center;

en el elemento que contiene al contenedor, valga la redundancia.

Pero esto no es del todo correcto, ya que un elemento de bloque no es texto, por lo que tendremos que aplicar una propiedad especial.

Pongamos por caso que queremos centrar el contenedor entero de la página web (como es el caso de zumbe). Primero tenemos que centrar el texto, como hemos dicho anteriormente, en el elemento body.

Código: css
  1. body
  2. {
  3.       text-align: center;
  4. }

Y ahora aplicar la propiedad especial al elemento contenedor, es decir, el que será centrado:

Código: css
  1. #contenedor
  2. {
  3.       margin: 0 auto;
  4.       width: 80%;
  5.       text-align: left;
  6. }

En este caso es un elemento de id “contenedor”, al que aplicamos la propiedad margin:0 auto;, es decir, margen arriba y abajo tamaño cero (puede ser cualquier medida), y margen izquierda y derecha auto.

También hemos dicho que mida el 80% y que alinee el texto a la izquierda, por si aplica al texto la propiedad que habíamos dado a body de justificar al centro.

El código HTML seria algo así:

Código: html
  1. <html>
  2. <head>
  3. … etiquetas de head…
  4. </head>
  5. <body>
  6. <div id="contenedor"><p>Este texto está centrado!</p></div>
  7. </body>
  8. </html>

2 Abril 2006 · Tags Sin categoría |

No hay comentarios, escribe el primero!

Escribe un comentario!

Buscador

2005-2007 Zumbe.net Creada por Alex Barros con WordPress - Licencia Reconocimiento - RSS