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

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

如果所有图像都位于父级

div

下的

位置：绝对

，则该功能可以正常工作

当有不同方向和纵横比的图像时，问题就出现了。当我希望它们与

div

的中心（水平和垂直）对齐时，它们都会粘在父

div

的左上角

如果我将它们更改为

位置：relative

，它们将出现在现有图像旁边，同时开始淡入，因为原始图像尚未淡出

非常感谢您的任何想法

（所有功劳归于原作者：托尔斯滕·巴尔德斯）

---

编辑：水平居中是可能的，垂直居中如何？

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

首先，将图像包装到列表项元素中。将以下类添加到CSS中：

.innerfade li { width: 100%; }

接下来，将图像包装在div元素中，并使用文本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>

这里的代码和示例就像黄金一样。当人们看到它时，他们想提供更多帮助：）你在使用什么JS框架？你能在JSFIDLE.net上发布一个例子吗？谢谢，我在想如果我发布了这个。。这将是一个tl；dr对于很多人来说都很有用。@user1017942:无论如何，你应该尽量提供最少的示例，即使只是为了你自己的调试。跳过一段很长的代码比一开始就没有可以忽略的代码更糟糕。感谢它的工作，但是垂直居中是可能的吗？由于“垂直对齐：中间”不适用于垂直居中元素，请查看此帖子：感谢您的建设性意见。我最终没有试图解决这个问题。我选择了一些jQuery插件。这简化了操作，我只是接受了结果。