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