div中的垂直對齊圖像

Question

好的，這是問題所在，我有不同大小的圖像，但這並不重要，因為它們的寬度始終大於高度，並且所有圖像都調整為100px的寬度（每個圖像的高度仍然不同）

我正在嘗試垂直對齊100px x 100px的div內的圖像。 我嘗試了各種各樣的東西。 行高，邊距的自動，表格單元格方法對我都不起作用...

這是html：

<div class="kassabon_product_image">
<img src="product1.png" />
</div>

這是CSS

.kassabon_product_image{
float: left;
display:table-cell;
width: 100px;
height: 100px;
background-color: red;
border: 1px solid #D5D0C6;
line-height: 100px;
vertical-align:middle;
}

.kassabon_product_image img{
width: 100px;
}

Answer 1

.kassabon_product_image{
    display:table-cell;
    vertical-align:middle;
}

從img刪除vertical-align，這應該可以解決問題。

Answer 2

看評論

.kassabon_product_image{
float: left;
text-align: center; /*using text-align:center in the outer div will center all elements inside the div*/
display:inline-block;
width: 100px;
height: 100px;
background-color: red;
border: 1px solid #D5D0C6;
line-height: 100px;
}

.kassabon_product_image img{
width: 100px;
/*vertical-align:middle;*/ /*this is the wrong place to align*/
}