Question

我有一个名为product-large的div，里面有一个img作为孩子。结构如下：

<div class="product-large">
         <img id="product-image" src="http://cf.shopious.com/images/store_logos/thumbnail/2159d3537713da6dd80c80b33c87bbc1ce2c2aac.jpg" alt="">
</div>

问题在于产品图像不是居中的，而是坚持顶部。我已经在img css中使用了vertical-align：middle。这是为什么？

您可以看到完整的工作地点here（检查大图像上的元素）

Answer 1

我认为对于vertical-align：middle，你需要：

display: table-cell;

表示图片

Answer 2

居中的替代方法

1）获得固定的高度＆amp; img的宽度和make位置：相对于图像和包含div的 2）将图像定位在50％top＆amp;剩下50％（现在左上角在中间）
3）在图像宽度的负半部分应用左边距，并在img高度的负半边应用边距顶部

在名为容器的div中使用200px cat图像的示例：

.container {position:relative; width:600px; height:600px; background:red;}

.cat {position:relative; height:200px; width:200px; top:50%; left:50%; margin-top:-100px; margin-left:-100px;}

JS FIDDLE LINK - http://jsfiddle.net/qhWLK/

编辑：如果图像大小不同，使用jQuery获取图像大小并在页面加载或文档就绪时应用居中CSS，此方法仍然有效

Answer 3

试试这个

#main.product-detail .product-banner .product-large {
    display: table-cell;
    height: 437px;
    vertical-align: middle;
    width: 437px;
}

这将解决您的问题。

jsFiddle Code

Answer 4

试试这个

div * {margin-top:auto; margin-bottom:auto;}

在img上尝试不同的宽度和高度值以及跨度上的不同字体大小值，您将看到它们始终位于容器的中间。

vertical-align：div中间的<img/>不会使图像居中

4 个答案: