Question

好的，这里有问题，我有不同大小的图像，但这并不重要，因为它们的宽度总是大于它们的高度，并且所有图像都被调整为100px宽度（每个图像的高度仍然不同））

我试图将图像垂直对齐在100px x 100px的div中。我尝试过各种各样的事情。 line-height，margin的auto，table cell方法对我来说都不起作用......

这是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*/
}

div中的垂直对齐图像

2 个答案: