CSS定位:如何使它相对于一个元素而不是另一个元素

Question

我正在尝试做一个渐变幻灯片。

如果所有的图像都在position: absolute中，在父div下，它可以完美地工作。

当有不同方向和宽高比的图像时，问题就出现了，当我想让它们与div的中心(水平和垂直)对齐时，它们都粘在父div的左上角。

如果我将它们更改为position:relative，它们将出现在现有图像的旁边，同时开始淡入，因为原始图像尚未淡出。

任何意见都非常感谢。

http://jsfiddle.net/chocobo/ERH54/9/

(所有功劳归于原作者:Torsten Baldes)

编辑:水平居中是可能的，那么垂直居中呢?

Answer 1

我不是说这是最好的方法，但它是有效的:

首先在列表项元素中包装图像。在你的CSS中添加下面的类:

.innerfade li { width: 100%; }

接下来，在div元素中包装图像，并使用text-align: center样式。希望你能看到你的图片在中间水平对齐。

<ul id="rotation" class="innerfade">
    <li><div style="text-align: center;"><img src="http://www.google.com/images/nav_logo95.png"></div></li>
    <li><div style="text-align: center;"><img src="http://l.yimg.com/a/images/ww/met/slimheader/yahoo-logo-sm-png8.png"></div></li>
    <li><div style="text-align: center;"><img src="http://l.yimg.com/cv/mntl/aut/11q3/img_9224c7f0.jpg"></div></li>
</ul>