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

Answer 2

您可以根据自己的位置和百分比进行比赛。 http://jsfiddle.net/3X7rg/10/

#bigpic {
position: absolute;
float: left;
left: 200px;
width: 248px;
height: 315px;
border: 1px solid black;
}

#bigpic img {
position: absolute;
width: 100px;
height: 200px;
left: 50%;
top: 50%;
margin: -100px 0 0 -50px;
}

Answer 3

Here is another way to do it. I prefer this method because it allows variable height of the div as well as image. So i don't have to manually set the height.

WORKING DEMO

This is achieved using table-cell & vertical-align attributes in CSS

 display: table-cell;
 vertical-align: middle;