Como centrar un div en una página web utilizando hojas de estilo CSS y HTML

Autor: Felipe Zolórzano
Ultimos artículos

En general un sitio web siempre debe ir centrado, a menos que realmente se desee colocarlo a la izquierda o derecha, pero viéndolo de un modo estético, es la mejor manera de colocar el contenido de una web.

En este tutorial voy a mostrar como es posible centrar un div o el contenido de una pagina web utilizando CSS y HTML. La idea de utilizar CSS es poder separar los códigos entre CSS y HTML para poder tener un código más limpio y estético a la hora de hacer correcciones.

A modo de ejemplo, voy a crear una división principal y una división dentro de esta. Mostrare como centrar la división, que en términos practico en una página web es el que contiene la información completa de la pagina. También mostrare como centrar una división dentro de la división principal.

Creamos nuestro archivo HTML

El codigo CSS es de esta manera

Simplemente he creado la división principal y dentro de ella he colocado un "Texto de ejemplo". En la hoja de estilos he definido un ancho de 800px, un borde de 1px para poder visualizarlo en el navegador, una altura de 300px, un text-align para centrar el " texto de ejemplo". Y lo más importante, lo que se destaca para poder centrar la división, un margin.

El resultado es el siguiente:

Texto de ejemplo

Aquí el único atributo que hace que la división sea centrada es el margin:0 auto; Si se quita ese atributo, la división será colocada en la parte izquierda por default.

Cabe aclarar que si se utiliza el atributo text-align, este solo centra el texto que este dentro de la división y no los div que estén dentro de ella.

Para poder entender definitivamente como centrar un div, ahora voy a crear un div dentro del div principal, a este le voy a llamar "cuadro".

El código HTML queda asi:

Aquí solo le he agregado el identificador "cuadro" que es algo muy simple de hacer, no creo que haya complicaciones para hacerlo.

El código CSS queda así:

Puse un cuadro de 300px de ancho por 100px de altura y un borde para mostrarlo visualmente. Pasa exactamente lo mismo que paso con el div principal, pero ahora se centra con respecto al div principal. Anteriormente el div principal se centro con respecto al BODY. El margin es el que hace el trabajo de centrado, al final explico porque lo hace.

El resultado de este código es el siguiente:

Texto de ejemplo
Cuadro

En este caso al margin le puse un valor de 50px para separar la palabra "Texto de ejemplo" y la división "cuadro", esto significa que me separa 50px en el borde de arriba y el borde de debajo de nuestro "cuadro". El valor " auto" es el que realmente hace el trabajo de centrado, automáticamente separa el div de la parte derecha y de la parte izquierda, haciendo un cálculo para que el espacio derecho y el espacio izquierdo queden de la misma longitud.

Los más destacado es el atributo margin, es el que centra un div.

Para aquellos que no entendieron como se hace el centrado con esta explicación, he creado un video para explicarlo un poco más detallado. Anqué creo que no es muy complicado para entender.

Si te gusta este artículo por favor ayudanos, presiona el boton Google+1 (Google mas 1)

Si quieres saber como crear una página web desde cero visita. Como crear una página web completamnete desde cero en html y css

Anuncios
blog comments powered by Disqus
Políticas de privacidad | Términos y condiciones | Recomendación de hosting | Para webmasters | Como se hace..Cursos y tutoriales | Diseño web por ciudades | Osio
Copyright © 2012 | Todos los derechos reservados | Diseñado por mastersitios.com