Cómo centrar una página web en el navegador.

18
85845

Cómo centrar una página web en el navegador.

  1. Introducción
  2. Explicación
  3. Conclusión

1. Introducción:

Vamos a aprender cuál es la mejor manera de centrar nuestra web en el navegador. Existen varias formas de hacerlo:

a) Una forma sería colocar la etiqueta <center></center> envolviendo todo el contenido de nuestra página en el html. El inconveniente de esto, es que centrará también los elementos dentro de la página, por lo que se nos podrían descuadrar y tendríamos que modificar nuestras hojas de estilo.

<center>
<div id="contenido">
EL CONTENIDO DE LA PÁGINA
</div>
</center>

b) Otra manera sería ponerle un margin: left; de un tanto por ciento a todo el contenido de la página. Por ejemplo:

<div id="contenido">
EL CONTENIDO DE LA PÁGINA
</div>

Y en la hoja de estilos le damos un ancho y el margen:

#contenido { «width: 1024px; margin-left: 7%; }

De esta manera siempre habrá un margen a la izquierda que «centrará» el contenido, el inconveniente de esta manera de actuar es que en los ordenadores con pantallas pequeñas y en los dispositivos móviles se verá la página desplazada hacia la derecha debido a ese margen. Por lo que no se verá eficazmente centrada.

c) La siguiente forma de centrar la página es la más recomendada y además la más sencilla, la explico a continuación:

2. Explicación:

Para centrar la web en todos los navegadores, incluidos los dispositivos móviles, sólo tendrás que realizar tres sencillos pasos:

1. Tienes que encerrar todo el contenido de la etiqueta body de tu página en un elemento <div>.
2. A ese <div> le das un atributo id de esta manera:

<div id="contenido">
EL CONTENIDO DE LA PÁGINA
</div>

3. En la CSS es imprescindible que le des un ancho a la web para que pueda ser centrada, por ejemplo:

#contenido { width: 800px; margin: 0 auto; }

El margin: 0 auto; será lo que centre la página dejando un margen automático a la derecha y a la izquierda.

¡¡Y esto es todo!! Aquí os dejo un esquema para que podáis verlo bien 🙂

3. Conclusión:

Existen más formas de centrar una web, pero considero que esta es la mejor manera y la más sencilla para centrarla en todos los navegadores incluidos los dispositivos móviles. Y no hay que olvidar que el div en el que envolvemos toda la web necesita un ancho para que funcione.

Espero que os haya servido 🙂

Cristina

18 COMENTARIOS

  1. Lic. Fernandez, mil gracias, no solo por la aportaciòn que esta excelente, sino por tomarse el tiempo y la molestia de compartirlo y ayudar a muchas personas, desde la Ciudad de Mèxico mi agradecimiento y felicitaciones 🙂 🙂 😉

  2. Gracias Cristina, por fin pude hacerlo, solo era intentar, intentar y seguir intentando y todo a una explicación muy directa y bien hecha. Me sirvió la opción tres y era dejar la posición del como «relative», ya que los otros divs los tenía como «absolute». Gracias de nuevo, sería bueno saber donde más compartes lo que sabes, quisiera probar con la animación 3D.

  3. Hola, gracias por la explicación. Ahora me gustaría saber como hacer que mi página siempre esté centrada en Muse, se me alinea a la izquierda y no se que ha pasado. ¿Tienes idea de eso?
    Gracias, un saludo

  4. Eres UN Primor de Mujer. Siempre he pensado que la Belleza NUNCA podría ir de la mano con la Inteligencia… TU ERES LA PRUEBA DE LO CONTRARIO. Gracias, me has aclarado una eterna duda.

    Venezuela.

    • El comentario más machista y absurdo que he leído últimamente… ¿de verdad pensabas hasta que escribistes esto que la belleza tenía alguna relación con la inteligencia?

  5. Me parece una buena aportación hacia los jóvenes de hoy en día ya que necesitan de toda la información mas mínima para que comprendan.
    Excelente aportación Buen día.

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad