CSS：为什么“vertical-align：middle”不起作用？ [英] CSS: Why "vertical-align: middle" does not work?

问题描述

考虑下面的例子：（

Consider the following example: (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;
}

The output is:

Why the image is not vertically centered ?

How could I fix that so it will work in all major browsers ?

Please don't assume any image size (like 32x32 in this case), because in the real case the image size is unknown.

解决方案

You can use position:absolute; for this.

For example:

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

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

NOTE: This gives margin-top half of the image size.

Check this http://jsfiddle.net/cXUnT/7/

这篇关于CSS：为什么“vertical-align：middle”不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！