考虑以下示例：(
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;
- }
注意：这给图像大小的边缘上半部分.
