我有一个名为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(检查大图像上的元素)
答案 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;
}
这将解决您的问题。
答案 3 :(得分:0)
试试这个
div * {margin-top:auto; margin-bottom:auto;}
在img上尝试不同的宽度和高度值以及跨度上的不同字体大小值,您将看到它们始终位于容器的中间。