关于CSS：将div中的图像居中(水平和垂直)与jQuery幻灯片冲突


Centering (horizontally and vertically) images within a div conflicting with jQuery slideshow

我知道有很多关于垂直和水平放置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幻灯片引起的，据我了解，它实际上加载了所有图片，但随后隐藏了所有图片。

我希望有人可能对如何解决这个问题有所了解。
谢谢！

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

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

我认为以下方法会起作用：更改

1
2
    <img.../>
    <img.../>

收件人：

1
2
    <img.../>
    <img.../>

使用CSS：

1
2
3
4
5
6
7
8
9
.img-slide, .img-cell {
    height: 660px;
    width: 880px;
}
.img-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

由于容器(.imgcontent)的尺寸已知，因此将它们应用于package器。 img-slidepackage器将完全由插件定位，但是其内容应该像对单个图像一样起作用。

相关讨论