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

时间:2013-06-18 04:06:39

标签: html css css3

我有一个名为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(检查大图像上的元素)

4 个答案:

答案 0 :(得分:0)

我认为对于vertical-align:middle,你需要:

display: table-cell;

表示图片

答案 1 :(得分:0)

居中的替代方法

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,此方法仍然有效

答案 2 :(得分:0)

试试这个

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

这将解决您的问题。

jsFiddle Code

答案 3 :(得分:0)

试试这个

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

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