Centrar una Página Web

La manera más sencilla de centrar una página web es usando CSS, y una serie de tags div. A continuación, se explicará como se hace esto, y se proporciona el código necesario para centrar una web.

Paso 1: Crear estructura

Primero crearemos el cuerpo principal de la página web:

Publicidad
<div id="todo">
<div id="contenido"><center>Este es el cuerpo de la página centrada</center></div>
</div>

El contenedor todo será el principal, adentro de este estará el contenido de nuestra página Web.

Paso 2: Usar CSS para centrar el DIV

Agregaremos ahora el CSS, con el cual centraremos el contenedor contenido.

#todo{
position: absolute;
left: 50%; /* Comenzará a la mitad de la página */
margin-left: -450px;   /* Es la mitad del ancho de todo el contenido */
}

#contenido{
background-color: yellow; /* amarillo para poder notar la diferencia */
width: 900px;   /* ancho del contenido */
text-align: left;
}

Lo que el CSS está haciendo es posicionando el contenedor todo a la mitad de nuestra pantalla (50%), pero luego debido al margen negativo, el cual es la mitad del ancho total de nuestra página web, se posicionará a la izquierda, mostrando que el contenedor contenido está centrado.

Por otro lado, te recomiendo que leas esta otra forma de centrar una página web que es un poco más simple y directa.

Publicidad


También te interesaría...

Suscríbete a nuestra lista de correo

Etiquetas:, , ,

Publicidad

Deje un comentario