將產品圖像與底部垂直對齊

Question

我試圖將產品圖像與底部對齊以保持價格對齊。所以基本上這是它看起來像現在：

這是我想怎麼看起來像：

我試着vertical-align: bottom;但沒沒有工作。

我使用Woocommerce，我無法找到任何地方。

這是網站的鏈接：here

親切的問候！

Answer 1

嘗試表格佈局。

.featured-product-tabs .tab-content ul.products { 
    padding: 0; 
    display: table; 
} 

ul.products li.product.product-home { 
    text-align: left; 
    display: table-cell; 
    vertical-align: bottom; 
    float: none; 
} 

Answer 2

有幾種方法可以解決這個問題。這是我建議的解決方案。

您遇到的主要問題是圖像大小不同。如果圖像尺寸相同，則不會有問題。所以，這是你需要解決的問題。

看看在Inspect ElementCSS，有幾件事情我觀察。首先，有一個定義爲這樣的造型：不需要

img, video, object { 
    max-width: 100%; 
    height: auto !important; 
} 

這裏height財產。 此外，事實上它有!important不能幫助我們的事業。你可以擺脫這個屬性即修改類這樣：

img, video, object { 
    max-width: 100%; 
} 

你需要的目標接下來的事情就是讓所有的圖像具有相同的大小的。我看到一類專門針對這裏的圖片：

ul.products li.product a img { 
    width: 100%; 
    display: block; 
    margin: 0px 0px 8px; 
} 

你可以做的是一個max-height屬性和max-width屬性旁邊加上固定height。 max-width和max-height屬性將防止圖像縮小比例，而height屬性將強制所有圖像相同height（仔細選擇此值）。只給一個例子說明的目的，你可以修改類，如下所示：

ul.products li.product a img { 
    width:100%; 
    max-width: 10em;   /*added property*/ 
    height:15em;    /*added property*/ 
    max-height: 20em;  /*added property*/ 
    display:block; 
    margin:0 0 8px; 
} 

我做的Inspect Element這些變化在此圖像到達：

編輯：由於兩個原因，圖像不居中。首先，有應用了float屬性如下：

.wp-post-image { 
    float: left; 
} 

刪除該代碼。 其次，你可以在上面的代碼中看到，margin屬性如下：

margin:0 0 8px; 

只是將其更改爲：

margin:0 auto 8px; 

這將圍繞圖像。請參閱下面的更新的圖像：

Answer 3

只是包裝圖像中的容器<DIV>和CSS該分區：

position:relative; 
height:100px; you can change the height value here; 

和CSS的形象：

position: relative|absolute|fixed; choose one from this three; 
bottom: 0; 

這樣圖像將始終在div的底部。