jquery - 在与 jQuery 幻灯片冲突的 div 中居中(水平和垂直)图像

Question

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

我正在使用(自定义 Wordpress 主题)为我的摄影师 friend 构建一个作品集网站。你可以在这里看到它:http://alexdebrabant.com/front 他网站的某些页面只有一张图片，在这种情况下，我可以毫无问题地将图像在 .imgcontent div 中垂直和水平居中(使用 display:table-cell、vertical-align:middle 和文本的组合-居中对齐) 你可以在这里看到成功的例子: 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;顶部: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 包装器将由插件绝对定位，但其内容应该像处理单个图像一样工作。