圖片不會居中

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; 
}