Foros del Web » Creando para Internet » CSS »

Centrar imagen horizontal y vertical en 800x600

Estas en el tema de Centrar imagen horizontal y vertical en 800x600 en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/03/2006, 01:27
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Centrar imagen horizontal y vertical en 800x600

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
  #2 (permalink)  
Antiguo 08/03/2006, 08:05
 
Fecha de Ingreso: abril-2005
Mensajes: 76
Antigüedad: 12 años, 8 meses
Puntos: 0
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.
__________________
* Si hubiera previsto las consecuencias, me hubiera hecho relojero.
  #3 (permalink)  
Antiguo 08/03/2006, 16:55
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
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.
  #4 (permalink)  
Antiguo 09/03/2006, 04:31
 
Fecha de Ingreso: abril-2005
Mensajes: 76
Antigüedad: 12 años, 8 meses
Puntos: 0
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?
__________________
* Si hubiera previsto las consecuencias, me hubiera hecho relojero.
  #5 (permalink)  
Antiguo 09/03/2006, 18:06
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:51.