Como centrar una pagina web
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.
¿Páginas centradas?
Me refiero 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…
Como centrar una página web en el navegador
Ahora que ya sabes que hay una gran diferencia, es hora de ver cómo hacemos para centrar un diseño web… 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 web, de hecho hay muchas cosas más, pero la idea es dejar este post lo más sencillo posible.
|
Artículos Relacionados 8 Consejos para el diseño de un buen layout o estructura web Al crear un diseño de web, uno de los aspectos más importantes es el... Crear esquinas redondeadas con CSS y sin imagenes Hay muchas maneras de crear esquinas redondeadas con CSS, lo de usar tablas para... Maquetar una web a 3 columnas con CSS Enfrentarse a una hoja CSS para maquetar una página Html no es de por sí... Elección de una buena paleta de colores para tu web La parte más complicada del diseño de un interfaz de usuario es conseguir un interfaz... |
(2 votos)
Loading ...Autor y licencia
Autor: Germán Martínez
URL: AprendiendoWeb.com
5 Comentarios para “Como centrar una pagina web”
Enlaces a esta entrada
RSS
Nunca me habría imaginado un post tan largo para algo tan sencillo, ahora… claro a quedado clarisimo :)
Y si álguien no se ha enterado… es para colgarlo!
Un saludo.
20/11/09 - 14:02 #
Es sencillo sí, pero hay personas que no tienen muchas nociones de diseño y es más sencillo si se explica de forma detallada :)
20/11/09 - 18:29 #
Gracias por el dato, no pensaba que era tan fácil centrar una página…
4/12/09 - 15:18 #
excelente… bien claro y directo…!! Muy agradecido
18/01/10 - 15:09 #