Centrar contenido de la web para cualquier resolución y monitor.

dpbataller · #1 (**permalink**) 25/10/2011, 14:58

Buenas noches a todos/as, mi pregunta es la siguiente, he estado documentándome sobre el tema, pero no acabo de tener clara cual es la mejor opción.
Me gustaría saber cual es la mejor práctica para centrar el contenido de una web y así poder verla correctamente en resoluciones distintas y en pantallas de dimensiones diferentes.

He leído que lo mejor es introducir TODO el contenido en un #wrap y a ese #wrap fijarle un width de 960px , luego jugando con la posición a izquiera y derecha, quedaría centrado.

¿Qué hacéis vosotros en éstos casos?

Gracias!

RafaRG · #2 (**permalink**) 25/10/2011, 15:18

pues mira, yo creo que la mejor opción es hacer lo siguiente (te lo mostraré con un ejemplo):
tengo un div de 900 píxeles que quiero centrar en una pantalla de resolución X (me da igual la resolución). pues yo pondría en el css:

Código PHP:

  <style type="text/css">
#divcentrado {
   width:900px;
   position:absolute;left:50%;
   margin-left:-450px;
   }
</style>
<div id="divcentrado"></div>

paso a explicar el código:
·ya hemos dicho que el div debía tener un ancho de 900 píxeles: width:900px;
·posiciono el div a la mitad de la pantalla:position:absolute;left:50%;
·el toque final para centrarlo: margin-left:-450px;
lo que he hecho ha sido ponerle un margen por la izquierda de menos la mitad del ancho. con eso y con la posición al 50%, el div estará justo en el centro.
y éste es mi método. supongo que habrá muchos más, pero a mi parecer éste es fácil y rápido.

dpbataller · #3 (**permalink**) 25/10/2011, 15:22

Es bueno! no lo había pensado así, alguién tiene más métodos? es bueno saber y conocer distintas formas de hacerlo!

Gracias RafaRG!

educacanis · #4 (**permalink**) 26/10/2011, 05:08

Otra solución para centrar la página horizontalmente, que puede ser similar, es meter todo el contenido de la página web en un <div> y asignarle márgenes automáticos de la siguiente manera:

código css

Código HTML:

#contenedor{
 width: 300px;
margin: 0 auto;
}

codigo html

Código HTML:

<body>
<div id="contenedor">
<h1> texto y demás cosas de la página web</h1>
...
...
</div>
</body>

IsaBelM · #5 (**permalink**) 26/10/2011, 06:15

si la alineación central es sólo horizontal, la mejor opción es la que expone educacanis. en caso que tuviera que ser horizontal y vertical, se aproxima mas la solución de RafaRG

dpbataller · #6 (**permalink**) 27/10/2011, 14:39

¡Gracias a todos/as! Ya se por donde tirar!