Centrar imagen horizontal y vertical en 800x600

kahlito · #1 (**permalink**) 07/03/2006, 01:27

Hola, estoy haciendo pruebas para centrar una imagen o flash en todas las resoluciones, sin embargo a la hora de verla en 800 x 600 la parte de arriba queda cortada por el tema de que la altura de la imagen es mayor que 420 (altura aproximada en 800 x 600)

El código:

Código HTML:

<style type="text/css">
    #todo {
	position:absolute;
	top:50%;
	left:50%;
	width:650px;
	height:540px;
	margin-left:-320px;
	margin-top:-270px;
	background-color: #333;
	}
</style>

Código HTML:

<div id="todo">
 <img src="imagen_prueba.jpg" width="650" height="540" />
</div>

¿Alguna otra manera?, gracias de antemano

xavi · #2 (**permalink**) 08/03/2006, 08:05

Prueba lo siguiente:

css

Código:

#rap { 
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	overflow: visible;
	visibility: visible;
	display: block
}

#pagewidth { 
	margin-left: -400px;
	position: absolute;
	top: -300px;
	left: 50%;
	width: 800px;
	height: 600px;
	visibility: visible
}

html

Código:

<div id="rap">
<div id="pagewidth">
	<div><img src="img.jpg" /></div>
</div>
</div>

esto lo que hace es centrar vertical #rap y centrar #pagewidth con respecto a #rap. Debería funcionarte bien.

kahlito · #3 (**permalink**) 08/03/2006, 16:55

Hola xavi, gracias por tu respuesta.

auque la verdad he probado tu ejemplo y no me funciona, lo que hace es centrarla pero en 800x600 se sigue comiendo unos pixeles por arriba y en 1024 queda ajustada arriba.

xavi · #4 (**permalink**) 09/03/2006, 04:31

tendrás que ajustar el margen negativo de la capa contenedora a la mitad de la altura y la anchura del contenedor... en tu caso serían -270 y -320, lo probaste con esos valores?

kahlito · #5 (**permalink**) 09/03/2006, 18:06

Hola de nuevo xavi.

La verdad es que si he probado tanto con tu ejemplo como con los margenes a -270 y -320 e incluso algunas pruebas más y no me consigue centrar bien en 800 x 600.

Ejemplo:

Código HTML:

<style type="text/css">
#rap { 
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	overflow: visible;
	visibility: visible;
	display: block
}

#pagewidth { 
	margin-left: -320px;
	position: absolute;
	top: -270px;
	left: 50%;
	width: 800px;
	height: 600px;
	visibility: visible
}
</style>
<body>
<div id="rap">
<div id="pagewidth">
<div><img src="imagen_prueba.jpg" width="650" height="540" /></div>
</div>
</div>
</body>

Gracias de todas formas, la verdad es que es solo un experimento que me dió por probar y no me urge, pero por si acaso seguiré probando.

Saludosss