垂直对齐div中的图像答案

【问题标题】：vertical align image in div垂直对齐div中的图像
【发布时间】：2012-10-21 05:11:55
【问题描述】：

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

我正在尝试在 100px x 100px 的 div 内垂直对齐图像。我尝试了各种各样的事情。 line-height、margin's 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;
}

【问题讨论】：

这个问题在Stack Overflow 上被问过至少 10 次，我记得。这里可能有数百个这样的确切问题。发帖前请先搜索。
我在 google 和 Stack Overflow 上搜索了至少 1.5 小时，给出的答案都对我没有帮助。我尝试在自动上设置边距顶部和底部，使用 display:table-cell;方法，甚至看到了一些位置：相对；最高：50%；（但这只是将图像顶部放在 div 的一半）。我发布这个是因为发布的答案在这种情况下不起作用，出于某种奇怪的原因。
在Stack Overflow 上，您应该解释您尝试过的内容，以及对您没有效果的原因。它会显示您的努力，并且会为我们提供帮助您的正确方向。此外，您认为正确的解决方案，我记得至少回答了 2 次。

标签： html css image alignment vertical-alignment

【解决方案1】：

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

从 img 中删除垂直对齐，这应该可以解决问题。

【讨论】：

不知何故它不起作用。就像我在问题中所说，父 div 中的垂直对齐不起作用。
看看我创建的这个小提琴jsfiddle.net/vLYpz 并从那里开始工作。它应该可以正常工作。
嗯……那是我的愚蠢。将浮点数与垂直对齐结合使用只会禁用对齐。删除了浮动，现在它可以工作了。谢谢:)
浮动元素取消显示属性（本质上将其设置为显示：块）。您可以用另一个浮动的 div 包装父级，或者根据您的设计将这个旁边的元素设置为 display:table-cell （产生与两个浮动元素相似的结果）真的取决于您要完成的工作不过。
嗯，还没有想到 display:table-cell。谢谢

【解决方案2】：

见 cmets

.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*/
}

【讨论】：

text-align 据我所知仅进行水平对齐。但是无论哪种方式都进行了测试，但是没有，不起作用。