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

Question

Consider the following example: (live demo here)

HTML:

Answer 1

If you know the vertical size of the element and the line height, then you can vertically center it by using vertical-align: top plus a top margin.

For illustration, I created: http://jsfiddle.net/feklee/cXUnT/30/