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

Question

Consider the following example: (live demo here)

HTML:

Answer 1

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/