Centrar DIV horizontal con estilos CSS

Gracias a estilos CSS podremos lograrlo de manera sencilla

CSS Es común querer centrar nuestra página web horizontalmente, para que no quede toda alineada a la izquierda dejando un enorme espacio vacío en el lado derecho, cada día más notable por los monitores panorámicos de cada vez más pulgadas.

Ocurre que no existe ningún atributo que haga alinearse a los elementos al centro. Podremos centrar texto, sí, pero no una caja con la facilidad con la que podemos hacerlo a la izquierda o la derecha.

Para ello, se utiliza un truco que luego pasaremos a explicar, os muestro un fragmento de código de una DIV y su correspondiente estilo:

  <style type="text/css">
.centrada {margin: 0 auto; width: 800px;}
</style>
</head>
<body>
<div class="centrada">
<p>Este contenido está en una DIV centrada</p>
</div> 

Bien, la explicación es sencilla. Como podemos ver en el ejemplo, nuestra capa tiene como mínimo dos elementos obligatorios: "margin" (margen) y "width" (anchura).

El motivo no es otro que obligar a nuestra DIV a que tenga valor "auto" (automático) para sus márgenes izquiero y derecho, de este modo, ambos tendrán el mismo y así conseguiremos que nuestra DIV quede centrada, no por alineación, sino porque debe estar a la misma distancia de ambos flancos de nuestra pantalla.

Para que esto sea efectivo hay que especificarle un "width" (ancho). Por otro lado, podremos añadir más elementos al CSS de nuestra DIV, como un "border", un "background" o lo que queramos siempre y cuando no afecten a la posición de nuestra DIV.

Pablo Miércoles 24 Octubre 2012 - 4:21 pm | | Desarrollo Web, · Adobe Dreamweaver

Un comentario

jeje
jeje, - 12-07-’15 19:28
(optional field)
(optional field)

La moderación de comentarios está activa en este sitio web. Esto significa que sus comentarios no serán visibles en la página hasta que hayan sido aprobados por un editor.

¿Recordar información personal?
Letra pequeña: Todas las etiquetas html excepto <b> e <i> serán eliminadas de su comentario. Puede introducir enlaces simplemente escribiendo la url o direcciones de e-mail.