CSS：試圖將圖像垂直居中div中......瀏覽器，Safari瀏覽器發出

Question

我最近增加了對我的客戶的主頁（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%); 
} 

Answer 1

也許這將覆蓋你的需求：

您可以使用display:inline-block爲img S，讓他們接受vertical-align屬性並將其設置爲middle;

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