CSS-为什么我不能在此div中垂直对齐此图像？

Question

我正在尝试使用line-height方法在div中对图像进行v对齐。

我不明白为什么它不起作用。

此方法已在StackOverflow上进行了多次。

如果仅将img替换为文本，则文本v对齐不会出现问题。

<div class="image_wrapper">
    <img src="http://requestaweb.com/wp-content/uploads/2014/05/css.png">
</div>

.image_wrapper {
    height: 400px;
    line-height: 400px;
    vertical-align: middle;
    background-color: gray;
    text-align: center;
}
img {
    height: 200px;
}

http://jsfiddle.net/Nikzilla/q3Lu8nrm/1/

Answer 1

这样改变你的CSS

.image_wrapper {
    height: 400px;
    line-height: 400px;

    background-color: gray;
    text-align: center;
}
img {
    height: 200px;
    vertical-align: middle;
}

这有效..我尝试了..

Answer 2

图像需要知道如何对齐自身，因此还要添加更严格的CSS规则，而不是为img标签添加通用规则。

.image_wrapper {
height: 400px;
line-height: 400px;
vertical-align: middle;
background-color: gray;
text-align: center;
}

.image_wrapper img {
    height: 200px;
    vertical-align: middle;
}

干杯！