与 jQuery 幻灯片冲突的 div 中的居中（水平和垂直）图像

Question

我知道有大量关于在 div 中垂直和水平居中图像的帖子。 那不是我的问题。我能够做到这一点。

我正在使用（自定义 Wordpress 主题）为我的摄影师朋友建立一个作品集网站。你可以在这里看到它：http://alexdebrabant.com/front 他网站的某些页面只有一张图片，在这种情况下，我可以在 .imgcontent div 中垂直和水平居中图像（使用 display:table-cell、vertical-align:middle 和 text 的组合） -居中对齐） 你可以在这里看到成功的例子： http://www.alexdebrabant.com/blog/emilia/（全高并正确水平对齐） http://www.alexdebrabant.com/blog/trusst-2/（全宽并正确垂直对齐）

但是，其他一些页面在 jQuery 幻灯片中“包装”了几张图片。在这些页面上，我似乎无法将图像与 div 居中。它们与左上角对齐。 你可以在这里看到一个例子： http://www.alexdebrabant.com/blog/divine-2/（对齐 div 的左上角）

我相信这个问题是由 jQuery 幻灯片引起的，据我了解，它实际上加载了所有图片，但随后隐藏了所有图片。

我希望有人知道如何解决这个问题。 谢谢！

Answer 1

问题是由幻灯片插件引起的，一旦有多个图像，它就会将position: absolute; top:0; left:0 应用于图像。这有效地取消了分配给父级的对齐定义。

看着过渡，图像相互融合，因此它们必须绝对定位（没有其他方法可以做到这一点）。

我认为以下方法可行：更改

<div class="imgcontent">
    <img.../>
    <img.../>
</div>

收件人：

<div class="imgcontent">
    <div class="img-slide"><div class="img-cell"><img.../></div></div>
    <div class="img-slide"><div class="img-cell"><img.../></div></div>
</div>

使用 CSS：

.img-slide, .img-cell {
    height: 660px;
    width: 880px;
}
.img-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

因为容器 (.imgcontent) 的尺寸是已知的，所以我们将它们应用于包装器。 img-slide 包装器将被插件绝对定位，但其内容应该像处理单个图像一样工作。