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,并从容器中删除字体大小,它就可以工作。
但是当我将字体大小添加到 500 像素的容器中,然后将 ank 中的行高设置为该字体大小的 100% 时,它不起作用。它使图像略低于应有的位置。
工作 jsfiddle:http://jsfiddle.net/eujFY/1/
更新:
这个解决方案对我有用: http://jsfiddle.net/eujFY/2/ <---- 已更新。
最佳答案
我看到您找到了解决方案,但是这意味着要在两个元素上手动设置高度,并且需要使用不必要的标签。 所以我建议你检查“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;
}
关于image - 为什么这不垂直居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16040551/