我有一个名为 product-large 的 div，里面有一个 img 作为 child 。结构如下所示:
<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 (检查大图上的元素)
最佳答案
居中的替代方法
1) 获取img的固定高度和宽度并使position:relative为图像并包含div
2) 将图像定位在 50% top & 50% left (现在左上角在中心)
3) 在图像宽度的负一半处应用 margin-left，在 img 高度的负一半处应用 margin-top
在名为 container 的 div 中有一个 200 像素的猫图像的示例:
.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，此方法仍然有效
关于html - 垂直对齐 : middle an <img> inside a div doesn't centers image，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17160366/