考虑以下示例：(
live demo here)
HTML：
<a><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></a>
CSS：
a {
display: block;
background: #000;
line-height: 40px;
}
img {
vertical-align: middle;
}
输出为：
为什么图像不是垂直居中的？
我该如何解决这个问题呢,它会在所有主流的浏览器中运行？
请不要承担任何图像大小(如32×32在这种情况下),因为在实际情况下,图像大小是未知的.
解决方法
你可以使用position：absolute;为了这.
例如：
a {
display: block;
background: #000;
line-height: 40px;
height:80px;
position:relative;
}
img {
position:absolute;
top:50%;
margin-top:-16px;
}
注意：这给图像大小的边缘上半部分.
