imagen de matthewlucas
Cómo hacer que tus páginas estén centradas
Cada vez hay monitores más grandes y con mayor resolución, y eso es algo que hay que tener en cuenta eso al momento de diseñar un web.
¿A qué me refiero cuando digo que tus páginas estén centradas?
A que por defecto, el contenido de las páginas está alineado a la izquierda, es decir, el contenido de tu página está pegado al borde izquierdo de la ventana del navegador.
Esto nunca fue un problema cuando la mayoría usaba monitores de 800 x 600, pero ahora (y desde hace bastante tiempo) este tipo de resolución casi ha desaparecido, entonces conviene diseñar pensando en monitores con resoluciones mayores.
Es mucho más fácil darse cuenta de esta diferencia con una imagen, aquí te muestro cómo se vería Aprendiendo Web centrado y alineado a la izquierda...
Ahora que ya sabes que hay una gran diferencia, es hora de ver cómo hacemos para centrar un diseño... en realidad es bastante fácil.
Lo primero que hay que hacer es encerrar todo el contenido de la página en un elemento <div> y darle un atributo id, en este caso usaré id="content".
Luego vamos a la hoja de estilos y agregamos esto:
#content {
width: 990px;
margin: 0 auto;
}
Lo que estamos haciendo aquí es primero que nada darle un ancho al elemento, esto es lógico ya que cuando quieres centrar algo dentro de otra cosa tienes que saber de que tamaño son.
margin: 0 auto; significa que ese elemento tiene un margen de 0 arriba y abajo, y un margen automático para izquierda y derecha, este margen automático es el que lo centra.
Te darás cuenta con esta imagen:
Eso es lo básico al momento de centrar una página, de hecho hay muchas cosas más, pero la idea es dejar este post lo más sencillo posible.
Etiquetas:
si te gustó esta entrada, tal vez quieras suscribirte via RSS
Hola, soy
Comentarios
deja un comentario
bastante útil para dejar de usar el atributo <center>. Anteriormente habías mencionado que harías un post donde explicarías por qué no usar posiciones relativas en css. Creo que fué en el post de layout tableless. esto es algo que me tiene intrigado jajaja
Saludos
Coffee, las posiciones relativas son muy útiles, la cosa es saber cuando usarlas.
Tienes razón, voy a hacer un post al respecto.
IE 6 una ves mas dando dolores de cabeza, quisiera aportar un poquito al post, para que IE 6 reconosca los margenes y el centrado hay que alinear el texto del cuerpo al centro :
body {text-align:center;} /*Para centrar con IE6*/
eh venido leyendo tus post german muy buen blog ;) sin duda uno de mis favoritos.
entrepixeles, muchas gracias por el aporte, sí IE6 tiene muchos problemas aunque no siempre es necesario hacer el truco del text-align: center; por ejemplo en este blog no lo hago y sí se ve centrado en IE6.
No sé muy bien de que depende eso de centrarlo en IE6 usando ese hack, sé que a veces es necesario (pero estoy seguro que hay formas de evitarlo).
En todo caso si usas el body{text-align: center;} te recomendaría que lo hagas en una hoja de estilos especialmente creada para IE6 (donde repararías ese y los demás bugs de este terrible navegador).
Sólo agregar que si usas el body{text-align: center;} luego debes definir #content{text-align: left;} y así te evitas que todo el texto de tu página quede centrado.
Muy buen aporte, gracias!
A lo que entrepixeles se refiere es a una técnica anterior para centrar el documento. Lo que se hacía era darle un "text-align: center" al body y un "text-align: left" al contenedor que debería ser centrado (aparte del width y el margin: 0 auto;).
De esta forma el contenedor primero se alineaba al centro, pero su contenido también se alineaba(todos los textos quedaban centrados totalmente), así que se necesitaba definir un text-align: left en el contenedor para volverlo a la normalidad.
Pero esto se puede decir que ya es cosa del pasado, y sólo sucede si no tienes definido un DTD en tu página ya que antes los DTD no eran tan populares que digamos, así que esto ocurría muy a menudo.
Para lo actual puedes usar el código que Germán pone arriba, funcionará en todos los navegadores comunes.
Olvidé decirles que la forma "antigua" que puse arriba, es la única forma de lograr centrar el contenido de la página para IE 5.5 (si ya se que esta viejito y casi nadie lo usa, pero de todas maneras lo aclaro) así tengas DTD o no.
Pero en fin, no creo que se necesite tomar a IE 5.5 en cuenta, salvo para un concurso universal de accesibilidad.
Leyendo por ahí me entero que IE 5.01 también necesita de la versión antigua (obviamente!!!)
Disculpen por los post seguidos...me emocioné... :D
Genial aporte Laren!
Muy buena explicación, no hay nada que agregar a eso, excepto tal vez explicar que DTD = Document Type Definition.
Un abrazo.
gracias por la ayuda fue muy util
Adios al "Center".
Gracias es muy util el ejemplo.
Muchas gracias por tu dedicación y por ayudar a gente como yo, que nos encontramos tan perdidos muchas veces en todos estos temas.
Estoy intentando centrar todo el contenido de una página construida en HTML. He seguido tus indicaciones, pero no consigo hacerlo. Creo que mi error puede radicar en el momento de "encerrar" todo el contenido en un div. ¿sabrías decirme donde ha de empezar exactamente y donde ha de estar el cierre?
La segunda fase creo que la hago bien: estoy sustituyendo 990 por el ancho de mi contenido, que en este caso es 870 px, quedando así:
#content {
width: 870px;
margin: 0 auto;
}
Si esto está bien, mi error debe ser, efectivamente, el tema div. Ojalá sepas ayudarme... muchas gracias y disculpa por mi ignorancia absoluta en este asunto.
Saludos!
Deja un comentario