Question

我尝试使用行高方法对div中的图像进行v对齐。

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

此方法已在StackOverflow上多次使用。

如果你只是用文本替换img，文本对齐没有问题。

<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;
}

干杯!!

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

2 个答案: