CSS: Why “vertical-align: middle” does not work?

Question

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.

Answer 1

I can't really tell you the specifics as to why this happens (I'm curious myself). But this works for me:

a {
    display: block;
    background: #000;
    line-height: 40px;  
}
img {
    vertical-align: middle;
    margin-top:-4px; /* this work for me with any given line-height or img height */
}

Answer 2

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/