Question

我知道有很多关于纵向和横向内部图像居中的帖子。那不是我的问题。我能够做到这一点。

我正在为我的摄影师朋友建立一个投资组合网站（一个自定义的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包装器将被插件绝对定位，但其内容应该像单个图像一样工作。

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

1 个答案: