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

Question

Consider the following example: (live demo here)

HTML:

Answer 1

Not sure what's the cause.

Removing the line-height and adding margins to the image does the trick.

a {
  display: block;
  background: #f00;
}
img {
  margin: .3em auto;
  vertical-align: middle;
}