centrar imagenes de distinto ancho en una capa

descargascisi · #1 (**permalink**) 16/05/2013, 05:01

Hola,

tengo un problema que no consigo solucionar, en un visor de imágenes quiero que aparezcan centradas horizontalmente, las fotos son de distintos anchos he generado lo siguiente en un archivo css:

#bigPic{
width:760px;
height:425px;
padding:1px;
margin-bottom:10px;
}
#bigPic img{
position:absolute;
display:none;
}

He probado de todo y lo único que he conseguido es con margin en #bigPic img pero claro como son de distinto tamaño, no me vale. Alguien me puede dar alguna idea????

pzin · #2 (**permalink**) 16/05/2013, 05:09

En principio para centrar imágenes lo puedes hacer especificando que el padre tenga un text-align: center.

Si eso no te vale, deberías de aportar el HTML que tengas, para ver un poco mejor el problema.

descargascisi · #3 (**permalink**) 16/05/2013, 06:48

Este es el HTML del visor de imágenes que a su vez se carga en un iframe:
<body>
<div id="Layer2"></div>
<div id='wrapper'>
<div id='header'></div>
<div id='body'>
<div id="bigPic" >
<img src="fotos1.jpg" width="550" height="425" alt="" />
<img src="fotos2.jpg" width="550" height="425" alt="" />
<img src="fotos3.jpg" width="550" height="425" alt="" />
</div>
<div align="center" class="estilo1" >
<div align="center" class="texto4" >.......</div>
</div>
<ul id="thumbs" >
<li class='active' rel='1'><img src="fotos 1_mini.jpg" alt="" /></li>
<li rel='2'><img src="fotos2_mini.jpg" alt="" /></li>
<li rel='3'><img src="fotos3_mini.jpg" alt="" /></li>

</ul>
</div>
<div class='clearfix' ></div>
<div id='push'></div>
</div>

<script type="text/javascript">
var currentImage;
var currentIndex = -1;
var interval;
function showImage(index){
if(index < $('#bigPic img').length){
var indexImage = $('#bigPic img')[index]
if(currentImage){
if(currentImage != indexImage ){
$(currentImage).css('z-index',2);
clearTimeout(myTimer);
$(currentImage).fadeOut(250, function() {
myTimer = setTimeout("showNext()", 12000);
$(this).css({'display':'none','z-index':1})
});
}
}
$(indexImage).css({'display':'block', 'opacity':1});
currentImage = indexImage;
currentIndex = index;
$('#thumbs li').removeClass('active');
$($('#thumbs li')[index]).addClass('active');
}
}

function showNext(){
var len = $('#bigPic img').length;
var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
showImage(next);
}

var myTimer;

$(document).ready(function() {
myTimer = setTimeout("showNext()", 12000);
showNext(); //loads first image
$('#thumbs li').bind('click',function(e){
var count = $(this).attr('rel');
showImage(parseInt(count)-1);
});
});

</script>
</body>
------------------------------

He probado lo text-align: center y no me funciona..... alguna otra idea,
os dejo parte del css

------------------------------
#wrapper{
width:700px;
min-height: 96%;
height: auto !important;
height: 96%;
margin: auto auto -30px;
padding:0 10px 0px 10px;

#bigPic{

width:auto;
height:425px;
padding:1px;
margin-bottom:10px;

}
#bigPic img{

position:absolute;
display:none;
width:auto;

}

alguien se le ocurre que puede estar fallando?? muchas gracias