Question

我在div中有3个图像，而div在另一个div中...就像这样

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

如果你转到http://www.willruppelglass.com/，你可以看到它是幻灯片，而且图像不在div中心，看起来很糟糕......

（我最初的计划是附上图片，但我不确定这是否可能......是吗？）

以下是幻灯片显示的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:250px;
}

和内容图片的CSS

.contentImages{
    border:1px solid #CCC; 
    padding:10px; 
    margin:20px auto 0; 
    position:relative;
    width:750px; 
    overflow:hidden;
}

我希望这是有道理的，这个问题一直困扰着我好几天，

Answer 1

以下是适合您的页面：http://www.w3.org/Style/Examples/007/center

另外，我建议您制作图像的缩略图。加载它们需要花费很长时间，幻灯片显示会在加载所有图像之前多次切换。

使用CSS位置绝对居中图像

1 个答案: