Изображения не будут центрироваться

Question

Я пытаюсь центрировать свои изображения, но ничего из того, что я пробовал, не работает: (

Вот CSS:

#slideshow {
    position:relative;
    height:200px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}
#slideshow, #slideshow2, #slideshow3 {
    overflow:hidden;
    float:left;
    width:267px;
}
.contentImages{
    border:1px solid #CCC; 
    padding:10px; 
    margin:20px auto 0; 
    position:relative; 
    width:804px;
    overflow:hidden;
}

И HTML:

<div class="contentImages">
    <div id="slideshow">
        <img src="upload/<?php echo $array['image'] ?>" height="200" class="active" />
        <img src="upload/<?php echo $array['image2'] ?>" height="200" />
        <img src="upload/<?php echo $array['image3'] ?>" height="200" />
     </div>
</div>

Я пробовал text-align, valign, margin 0 auto с относительным положением и шириной, ничего :( У кого-нибудь есть идеи?

Answer 1

Я не знаю деталей вашего макета, но text-align: center; на контейнере должно работать, если только изображения не расположены абсолютно.Попробуйте заменить правила для #slideshow и #slideshow IMG на:

#slideshow {
    position:relative;
    height:200px;
    text-align: center;
}

#slideshow img {
    z-index:8;
    opacity:0.0;
}