html – CSS：为什么“vertical-align：middle”不起作用？

考虑以下示例：( 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;
}

注意：这给图像大小的边缘上半部分.

检查这个http://jsfiddle.net/cXUnT/7/

原文地址：https://www.jb51.cc/html/230429.html