É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.
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.
Tendriamos algo como ésto.
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; }
Tendriamos algo como ésto.
Para mejor visualización de éste ejemplo, agregué la fuente verdana, un poco de padding, y un borde rojo.
Ejemplo del tutorial
Archivos del tutorial
Si tienes alguna pregunta de este tutorial; puedes hacerla aqui en los foros
