CSS：试图将图像垂直居中放置在 div 内...Chrome，Safari 问题答案

【问题标题】：CSS: Trying to place image vertically centered inside of div...Chrome, Safari issuesCSS：试图将图像垂直居中放置在 div 内...Chrome，Safari 问题
【发布时间】：2016-05-05 02:48:16
【问题描述】：

我最近在我客户的主页 (http://aworldcurated.com/) 上添加了三个新的内容区域，代码出现了一些问题，并使其图像在每个 div 内垂直居中显示。

在 Firefox 上，它是完美的。似乎在那里工作得很好，但在 Chrome 和 Safari (Mac) 上，图像向上浮动并出现裁剪。非常糟糕。

这是我正在使用的代码。希望你们当中有人知道解决方法。

HTML

<p><div class="home-img"><a href="/products/vegan-leather-carryall" title="Vegan Leather Carryall"><img border="0px" alt="Vegan Leather Carryall" src="//cdn.shopify.com/s/files/1/0471/0045/products/IMG_9478-Edit_medium.jpg?v=1451491340" /></a></div></p><h4 class="title" style="padding: 10px 0 0 0;">Vegan Leather Carryall</h4><span class="price">$ 90.00</span><p style="margin-top: 20px;"><a href="/products/vegan-leather-carryall" class="btn">Buy Now</a></p>

CSS

.home-img img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

【问题讨论】：

标签： css image google-chrome safari vertical-alignment

【解决方案1】：

也许这将满足您的需求：

您可以将display:inline-block 用于imgs，让他们接受vertical-align 属性并将其设置为middle；

.home-img img{
   display: inline-block;
   vertical-align: middle;
}

【讨论】：