CSS定位：如何使它相对于一个元素而不是其他元素？

Question

我想做一个淡入淡出的幻灯片JS。

如果所有的图像都在position: absolute的父母div下，它可以很好地工作。

当存在具有不同方向和宽高比的图像时，出现问题，当我希望它们与div的中心（水平和垂直）对齐时，它们都会粘到父div的左上角。

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

任何想法，不胜感激。

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

（全部归功于原作者：托斯滕Baldes）

编辑：卧式中心成为可能，对垂直居中怎么样？在列表项元素包装您的图像

开始：

Answer 1

我并不是说这是最好的方式，但它的工作原理。下面的类添加到您的CSS：

.innerfade li { width: 100%; } 

接下来，div元素内包装你的图像和文本对齐风格他们：中心。希望你应该看到你的图像在中间水平排列。

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