图像不会居中答案

【问题标题】：Images won't center图像不会居中
【发布时间】：2012-04-17 10:02:16
【问题描述】：

我正在尝试使我的图像居中，但我尝试过的没有任何效果:(

这是 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，有一个相对位置和一个宽度，什么都没有:(有人有什么想法吗？

【问题讨论】：

如果你把position:absolute;留在那里，它永远不会起作用。
正确！位置：绝对；删除继承的布局规则。
使用好旧的<center>，它始终可以跨浏览器运行！ :-) 其他人会因此而杀了我，但是一堆 css 过度杀伤而不是一个小的、简单的过时的 <center> :-) .... 这不值得，除非你喜欢花几个小时让你的工作代码也有效:-)
我取出了这个位置：absoulte，但现在我如何让它保持在同一个位置......看看willruppelglass.com/index.php所以看看我在说什么

标签： html css image center

【解决方案1】：

我不知道你的布局细节，但容器上的text-align: center; 应该可以工作，除非图像是绝对定位的。尝试将 #slideshow 和 #slideshow IMG 的规则替换为：

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

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

【讨论】：