html代码:
<div class="container">
<a class="ank">
<img src="http://www.w3schools.com/images/w3schoolslogoNEW310113.gif" />
</a>
</div>
css代码:
.ank
{
display: block;
width: 500px;
height: 500px;
line-height: 100%;
}
img
{
vertical-align: middle;
}
.container
{
display:block;
width: 500px;
height: 500px;
border: 1px solid black;
font-size: 500px;
}
jsfiddle:http://jsfiddle.net/mfBZZ/5/
如果我更改jsfiddle,使得anks line-height为500px,并从容器中删除font-size,它就可以工作。
但是当我将font-size添加到500px的容器中,然后以ank(100%的字体大小)形成行高时,它不起作用。它使图像低于它应该的位置。
工作jsfiddle:http://jsfiddle.net/eujFY/1/
更新:
此解决方案适合我: http://jsfiddle.net/eujFY/2/&lt; ----更新。
答案 0 :(得分:0)
我见过你找到了一个解决方案,但它意味着在两个元素上手动设置高度,它需要使用不必要的标签。 所以我建议你检查“display:table”(容器)和“display:table-cell”(内部元素)规则:http://jsfiddle.net/RxGS5/
HTML
<div class="container">
<a class="ank">
<img src="http://www.w3schools.com/images/w3schoolslogoNEW310113.gif" />
</a>
</div>
CSS
.container
{
display:table;
width: 500px;
height: 500px;
border: 1px solid black;
}
.ank
{
display: table-cell;
vertical-align: middle;
}