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

考虑以下示例：（现场演示在这里 http://jsfiddle.net/cXUnT/)

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;
}

输出是：

为什么图像不垂直居中？

我该如何解决这个问题，以便它可以在所有主要浏览器中运行？

请不要假设任何图像大小（例如本例中的 32x32），因为在实际情况下图像大小是未知的。

您可以使用position:absolute;为了这。

例如：

a {
    display: block;
    background: #000;
    line-height: 40px;
    height:80px;
    position:relative;  
}

img {
    position:absolute;
    top:50%;
    margin-top:-16px;
}

NOTE：这给出了margin-top图像大小的一半。

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