Código CSS para centrar una web en pantalla
Raro es ya ver una web que no esté centrada horizontalmente, por otro lado, existen webs de poca altura que en algunos casos nos interesa más, verlas centradas verticalmente en el monitor. Por otro lado una tendencia ya muy expandida es el uso de «pies de web«. Aquí os dejo algunos códigos CSS que espero os puedan servir en vuestros próximos diseños para solucionar estos conceptos.
- CENTRADO HORIZONTAL DE LA WEB – Hace tiempo que las webs empezaron a diseñarse centradas, en lugar de pegadas al margen izquierdo de la pantalla. Este es el código que se usa en el contenedor para centrar una web de ancho fijo en la pantalla.
div # contenedor (margin: 0 auto; )
- CENTRADO VERTICAL DE LA WEB – En este caso, la solución es un poco más laboriosa. Se trata de de fijar el margin-left y el margin-top de la web, teniendo en cuenta el ancho y alto de la web. Por supuesto que esto no sirve de nada para una web con alto dinámico (cosa que sucede en la mayoría de los casos). Suponiendo que tenemos una web de 800px de ancho y 500 de alto, este sería el método para centrarla verticalmente.
{ height:500px; width:800px; position: absolute; top: 50%; left: 50%;margin-top: -250px; margin-left: -400px;}
- PIE DE WEB– Una de las últimas aportaciones en el diseño web, ha sido el incorporar el pie al final de la página, llegando a ser muchas veces un instrumento de navegación.
En la página:
<html>
<body>
<div id=»nonFooter»>
<div id=»content»>
</div>
</div>
<div id=»footer»>
</div>
</body>
</html>CSS:
html
{
height: 100%;
}
body
{
height: 100%;
}
#nonFooter
{
position: relative;
min-height: 100%;
}
* html #nonFooter
{
height: 100%;
}
Yo (en mi modesta opinión) lo que haría sería utilizar un «margin:auto;» para el CSS de la siguiente manera:
width:1024px; /*ancho*/
height:768px;/*alto*/
background:#FFFFFF;/*color de fondo*/
border: 1px solid green;/*borde de 1 pixel y de color verde para que veas como queda centrado*/
margin:auto; /*esto te centra automaticamente la pagina*/
background-repeat:no-repeat;/*para que lo que hayas elegido de fondo no se repita cuando sobrepase el tamaño que le has especificado arriba*/
espero que os sirva 😀 Recuerdos desde Alicante
NOTA: Si lo que quieres es que se te quede mas hacia la derecha, a la izquierda, arriba o abajo entonces te recomiendo que quites «margin:auto;» y pongas (por ejemplo para que hagan las pruebas a su gusto):
margin-top:20px;
margin-right:10px;
margin-bottom:50px;
margin-left:auto;
body {visibility:hidden}
por que no metes todo el contenido en un div con el ancho de la pagina y al principio despues de body agregas center asì:
agregas
Aqui tu web.
OJO!. Si tu web està elaborada con div’s con posicion abosulte no creo que vaya a centrarse ya que estara donde lo pongas y sera como un float…
En realidad el 0 es el margin top, y el auto el margin right… es decir, deja 0 px de margen por arriba y auto por la derecha (obviamente por la izquierda también)… lo correcto sería: margin:0 auto 0 auto; ya que si no no valida CSS2.1.
Un saludo!
Hola dhamaso,
ciertamente las propiedades deverán de ir dentro de la css, en cualquier caso estoy anidando dos propiedades del margin, por un lado 0 para que no me deje ningún pixel de separación con los márgenes del navegador y por otro auto para que me centre el contenido.
No sé si era esto lo que querías saber, si no es así, házmelo saber.
saludos.
gracias por el aporte, la verdad yo soy mas programador, que maquetador o diseñador , pero creo que las tres cosas van de la mano y creo que es muy importante saber de todo un poco.
oye mi pregunta seria esta por que:
div # contenedor (margin: 0 auto; )
me lo podrias explicar esque yo soy muy necio a la hora de tratar de entender algo , ya que me gusta saber el por que de las cosas.
hasta luego y gracias de antemano.
He logrado centrar la aplicacion, Lo que sucede es que al instalarl el Ligthbox Plugin se me corre todo hacia la izquierda. si alguien sabe de este detalle de programacion muchas gracias
Hola buenas, me gustaria saber si me podeis echar una mano para centrar mi myspace, por mas que lo e intentado no lo e conseguido y es renegante…
Un saludo y muchas gracias por todo.