我想将图像放入垂直对齐但我仍然无法解决这个问题。我有这个代码不能正常工作:
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是最好的。谢谢你。
答案 0 :(得分: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*/
}
答案 1 :(得分:1)
你可以玩你的位置和百分比。 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;
}
答案 2 :(得分:0)
这是另一种方法。我更喜欢这种方法,因为它允许div的可变高度以及图像。所以我不必手动设置高度。
这是使用 table-cell&amp; amp; CSS中的垂直对齐属性
display: table-cell;
vertical-align: middle;