Comunidad de diseño web y desarrollo en internet

Centrar DIV horizontal en CSS

Éste 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 ústed desee, o le parezca conveniente.

XHTML
Tendriamos algo como ésto.

CSS

Para que el #wrap centre el contenido utilizaremos CSS.

Utilizaremos margenes 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; }

Éste 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. Éste 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; }

CSS
Tendriamos algo como ésto.

Agregando pequeños detalles

Para mejor visualización de éste ejemplo, agregué la fuente verdana, un poco de padding, y un borde rojo.

Visualización en Firefox
Al final, tendriamos ésto.

Cristalab y Mejorando.la te traen el Curso Profesional de Node.js y Javascript. Online, avanzado, con diploma de certificación y clases en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate