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

Question

Consider the following example: (live demo here)

HTML:

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 */
}