CSS:尝试将图像垂直居中放置在 div 内...Chrome、Safari 问题

Question

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

在 Firefox 上，它是完美的。似乎在那里工作得很好，但在 Chrome 和 Safari (Mac) 上，图像向上 float 并且看起来被裁掉了。非常糟糕。

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

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%);
}

Answer 1

也许这会满足您的需求:

您可以为 img 使用 display:inline-block，让它们接受 vertical-align 属性并将其设置为 中间;

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