Centrar DIV horizontal en CSS

Este tutorial tiene como objetivo, explicar cómo centrar todo el diseño de una web horizontalmente.

Nota: Para éste tutorial necesitas tener previos conocimientos sobre XHTML y CSS.

<div id="wrap">

Crearemos un div con el id wrap alrededor de todo el contenido de la página. Recuerde que puede cambiar el id por cualquier otro nombre que usted desee, o le parezca conveniente.

Tendríamos algo como ésto.

CSS

Para que el #wrap centre el contenido utilizaremos CSS.

Utilizaremos márgenes automáticos para centrar el div, y recuerde que éste debe tener un tamaño, ya sea en pixeles, em o porcentajes.

#wrap { margin: 0 auto 0 auto; width: 390px; }

Este código deberá funcionar en los browsers actuales que sigan las recomendaciones estándar de la W3C. Pero, IE 6 y anteriores, no reconoce éste código, por lo que tendremos que recurrir a un hack, utilizaremos text-align:center; para ésto. Este error será corregido en el IE7.

body { text-align:center; }

Por inercia, todo código de estilo CSS que se utilice en el XHTML, el contenido hijo hereda éstos estilos. En otras palabras, tódo el contenido será centrado, por lo que volveremos a utilizar text-align, pero ésta ves centrando todo el contenido de #wrap hacia la izquierda (o también podria ser hacia la derecha, dependiendo mucho de su diseño).

#wrap { margin:0 auto 0 auto;
width:390px; text-align:left; }

Tendríamos algo como ésto.

Usuarios que han visto este tema también han visto...

- Cambiar el aspecto del cursor con CSS
- Integración de interfaz en CSS
- Qué es CSS
- Decorando el drop down menú en CSS
- Estilos en formularios: Bordes llamativos para campos de formulario en CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento