Centrado horizontal y verticalmente

Gothgauss · #1 (**permalink**) 30/12/2012, 03:29

Hola chicos

Tengo una web que mide 800x600 y quiero centrarla tanto horizontal como verticalmente.

Si la resolución es mayor o igual a 1024x768 se ve perfecto, pero en netbooks y resoluciones menores como 800x600 o navegadores con barras de herramientas, la parte superior de la imagen no se ve.

¿Alguna idea de que puede pasar?

Aquí el código usado:

Código HTML:

<head>
<style type="text/css">

*{
margin:0;
padding:0;
}
body{
background:red;
width:100%;
height:40px;
}

#contenedor {
  width: 800px;
  height: 600px;
 
  position: absolute;
  top: 50%;
  left: 50%;
 
  margin-top: -400px;   /* height/2 = 500px / 2 */
  margin-left: -300px;  /* width/2 = 500px / 2 */
background:url('dibujo.jpg');
  }
</style>
</head>
<body>
<div id="contenedor">
Prueba
</div>
</body>

Os adjunto un par de imagenes, de lo que debería verse y lo que se ve:

Lo que debería verse entero:

http://subefotos.com/ver/?e23e0f10a3...801e329edo.jpg

Y como se ve:

http://subefotos.com/ver/?7fcae69ff8...744d1a88eo.jpg

Si os fijais en esta seguna imagen no se ve lo de 3.5 encima de un murete....

Gracias de antemano y feliz año!

rduran256 · #2 (**permalink**) 30/12/2012, 11:52

Hola Gothgauss primero que nada feliz año para ti también.

por que no pruebas esto

Código:

#contenedor {
position: absolute;
top: 50%; /* Buscamos el centro horizontal (relativo) del navegador */
left: 50%; /* Buscamos el centro vertical (relativo) del navegador */
width: 600 px; /* Definimos el ancho del objeto a centrar */
height: 400px; /* Definimos el alto del objeto a centrar */
margin-top: -200px; /* Restamos la mitad de la altura del objeto con un margin-top */
margin-left: -300px; /* Restamos la mitad de la anchura del objeto con un margin-left */
 .....

  }

eso centraría el contenedor automáticamente

solo tienes que ir jugando con tamaño de bloque y los margenes top y left

suerte ;)

Gothgauss · #3 (**permalink**) 31/12/2012, 04:44

Es eñe mismo código que puse yo, no?

DoHITB · #4 (**permalink**) 03/01/2013, 04:19

Buenas!

Para centrar todo el contenido de una web yo hago lo siguiente:

Código:

<div class="maincontent">
  <!-- aqui todo el resto-->
</div>

Y en el css:

Código:

.maincontent{margin-right: auto;margin-left: auto;margin-top: auto}

Supongo que jugando con los valores "margin-top" y "margin-bottom" podrás centrarlo también verticalmente.

Sino, siempre puedes usar una función con JS que detecte la resolución de pantalla, y a partir de ahí centrar verticalmente.

Si te interesa la función JS dímelo y te paso una función que tengo hecha que devuelve el tamaño de la ventana del navegador.

Saludos, y espero que te sirva!

EDIT: no había visto la parte que dices de la imágen. Esa parte yo la suelo arreglar así:

Código:

<body>
<img class="wallpaper" />
<div class="maincontent">
...
</div>
</body>

Y en el CSS:

Código:

.wallpaper{left: 0px;width: 100%;height: 100%;position: absolute;z-index: -1;}

Saludos