html - 图片垂直居中修复代码

Question

我想使图像适合垂直对齐，但我仍然无法解决这个问题。我的代码无法正常工作:

CSS:

#bigpic {
    width: 248px;
    height: 315px;
    float: left;
    margin: 0 0 30px 0;
    text-align: center;
}

.helper {
    float: left;
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#bigpic img {
    vertical-align: middle;
    max-width: 248px;
    max-height: 315px;
}

HTML:

<div id="bigpic">
    <span class="helper"></span>
    <img src="http://lorempixel.com/100/200" />
</div>

我只是看不出有什么问题为什么它不起作用。 Jsfiddle 在这里 http://jsfiddle.net/3X7rg/ .回答 jsfiddle 将是最好的。提前致谢。

Answer 1

添加 line-height: 315px 演示:http://jsfiddle.net/3X7rg/2/

#bigpic {
    width: 248px;
    height: 315px;
    float: left;
    margin: 0 0 30px 0;
    text-align: center;
    border: 1px solid black;
    line-height: 315px; /*must equal must be equal to height of the div*/
}