Centrar una imagen dentro de otro DIV

[ci2000]

Hola, hice una web dónde hay una gaelería de imágenes.

Con una resolución de 1024 x 768 se ve ok, pero si la resolución es otra la imagen grande se encima con las imágenes en miniatura que están a la izquierda.

Quisiera encontrar una forma de centrar la imagen grande dentro de la pantalla.

Código HTML

Código HTML:

 <div id="galeria"> 
		<div id="galeriai"> 
		<ul>
	  			<li><a href="#"><img class="min" src="./galeria/miniatura/min1.jpg" alt="" /><span><img class="fotos" src="./galeria/foto1.jpg" alt="" /><br /></span></a></li>
	  			<li><a href="#"><img class="min" src="./galeria/miniatura/min2.jpg" alt="" /><span><img class="fotos" src="./galeria/foto2.jpg" alt="" /><br /></span></a></li>
	  			<li><a href="#"><img class="min" src="./galeria/miniatura/min3.jpg" alt="" /><span><img class="fotos" src="./galeria/foto3.jpg" alt="" /><br /></span></a></li>
	  			<li><a href="#"><img class="min" src="./galeria/miniatura/min4.jpg" alt="" /><span><img class="fotos" src="./galeria/foto4.jpg" alt="" /><br /></span></a></li>
	  			<li><a href="#"><img class="min" src="./galeria/miniatura/min5.jpg" alt="" /><span><img class="fotos" src="./galeria/foto5.jpg" alt="" /><br /></span></a></li>																
				<li><a href="#"><img class="min" src="./galeria/miniatura/min6.jpg" alt="" /><span><img class="fotos" src="./galeria/foto6.jpg" alt="" /><br /></span></a></li>
		</ul>
		</div>		
		<div id="galeriad"> 
		<ul>
				<li><a href="#"><img class="min" src="./galeria/miniatura/min7.jpg" alt="" /><span><img class="fotos" src="./galeria/foto7.jpg" alt="" /><br /></span></a></li>
				<li><a href="#"><img class="min" src="./galeria/miniatura/min8.jpg" alt="" /><span><img class="fotos" src="./galeria/foto8.jpg" alt="" /><br /></span></a></li>				
				<li><a href="#"><img class="min" src="./galeria/miniatura/min9.jpg" alt="" /><span><img class="fotos" src="./galeria/foto9.jpg" alt="" /><br /></span></a></li>
				<li><a href="#"><img class="min" src="./galeria/miniatura/min10.jpg" alt="" /><span><img class="fotos" src="./galeria/foto10.jpg" alt="" /><br /></span></a></li>
				<li><a href="#"><img class="min" src="./galeria/miniatura/min11.jpg" alt="" /><span><img class="fotos" src="./galeria/foto11.jpg" alt="" /><br /></span></a></li>				
				<li><a href="#"><img class="min" src="./galeria/miniatura/min12.jpg" alt="" /><span><img class="fotos" src="./galeria/foto12.jpg" alt="" /><br /></span></a></li>
		</ul>
		</div>
		</div> 

Código CSS:

Código:

#galeria {
	background-color:#F8FAE4;
	width: 820px;
	height: 554px;
}

#galeriai {
	background-color:#F8FAE4;
	float: left;
	width: 120px;
	height: auto;
	margin-top: 2px;
	margin-left: 2px;
	display:inline;
}

#galeriad {
	background-color:#F8FAE4;
	float: right;
	width: 120px;
	height: auto;
	margin-top: 2px;	
}

#galeriai ul {padding:0px;margin:0px;width:119px;background:#F8FAE4 ;float:left;margin-left:0px;}

#galeriai li {list-style-type:none;padding:10px 8px 5px;background:#D8DAC4 ;float:left;line-height:11px;}

#galeriad ul {padding:0px;margin:0px;width:119px;background:#F8FAE4 ;float:left;margin-left:0px;}

#galeriad li {list-style-type:none;padding:10px 8px 5px;background:#D8DAC4 ;float:left;line-height:11px;}
	
a img.min {border:1px solid #D8DAC4;}

a span {
	visibility:hidden;
	text-align:center;
	font:bold 14px "Trebuchet MS",arial;
	position:absolute;
	top:295px;
	left:240px;  /* AQUI ES DONDE TENGO EL PROBLEMA*/
	border:0px solid #fff;
	z-index:10;
}
		
a:hover img.min {z-index:100;border:1px solid #D8DAC4;}
a:hover {display:inline;z-index:100;} /* Hace que funcione en IE6*/
a:hover span {visibility:visible;border:0px solid #837C63;background:#F8FAE4;z-index:100;}
a:hover span img {visibility:visible;z-index:100;}		

a:focus span , a:active span  {visibility:visible;z-index:10;background:#F8FAE4;}
a img.fotos {border:0px solid #CA9655;margin:px;}

Gracias desde ya por las respuestas.
Saludos

[ci2000]

Me olvidé del link para que vean el problema:
http://www.juntadepaysandu.gub.uy/

[Mikmoro]

Antes de nada: ¿has visto el scroll horizontal que saca la página. sin necesidad?
Esto se debe a que:

#menu ul {border-left:1px solid #FFFFFF;
float:left;
left:450px;
position:relative;
top:157px;
width:768px;
}

al tener posición relativa, con left:450px; le das un gran desplazamiento desde la izquierda, pero aun así mantienes un ancho de 768px, y claro, se va por la derecha toda una gran parte vacía.
Arregla eso y miramos el otro problema.

[Mikmoro]

El otro problema se debe a esto:

a span {
visibility:hidden;
text-align:center;
font:bold 14px "Trebuchet MS",arial;
position:absolute;
top:295px;
left:240px;
border:0px solid #fff;
z-index:10;
}

Con la posición absoluta le estás pidiendo que las imágenes grandes siempre salgan a 295px de arriba y 240 de la izquierda sea como sea esa la ventana, y claro no siempre encaja donde quieres.

Prueba añadiendo posicion relativa a tu div <div id="alrededor">:

#alrededor {background-image:url(fondo_alrededor.jpg);
background-repeat:repeat-y;
height:auto;
margin-left:auto;
margin-right:auto;
width:900px;
position:relative;
}

y recolocando un poco las imágenes centrales.

[ci2000]

Mil gracias Mikmoro. Eres un genio.

A los dos problemas los pude solucionar. La verdad no entiendo porque colocando position:relative; en el div alrededor afecta la colocación de las imágenes.

Saludos

[Mikmoro]

Porque la posición absoluta es con respecto a toda la página, pero si su contenedor tiene posición relativa, la absoluta es con respecto al contenedor. Así de sencillo.

[conmenta1965]

Hola. Mi opinión es que el Sitio está muy bien diseñado pero el problema que tienes es que no has aplicado una estructura de diseño fluido o/y liquido.

Esto te permitiria adaptar el Sitio a cualquier tipo de resolución y, sin tener que introducir propiedades "min-..." y "max-..."; además de la ventaja en diseño de evitar barras de desplazamiento.

Es una Técnica muy distinta a la empleada por tu parte. Más complicada, pero cuando la entiendes, es una gran ventaja porque evitas líneas de código y por ende, peso en el Sitio.

Para aprender esta Técnica, te recomiendo un buen maestro y de confianza. Tutoriales y demás únicamente te pueden redirigir a diferentes caminos y, cuando en CSS se mezclan distintas técnicas.... surgen los conflictos en los resultados.



Saludos.