Why doesn vertical-align work properly?
The first thing to realise is that vertical align does not vertically align divs (it was never meant to). Vertical-align determines the alignment of text within a single line of text or within a table cell. In a table cell the middle of the element will align with the middle of the cell. When used in a line of text vertical-align will position the text with respect to other text (or images) on the same line. This inline layout model is quite complicated but this is the basics of it: For each piece of text an inline box is generated, using the content area (box defined by font-size for each piece of text) and the half leading ((font size -line height)/2) to arrive at it’s final height. These boxes will always be centred vertically with respect to each other within the line unless another value is applied to vertical-align (taken from Eric Meyers book Cascading style sheets 2.0 Programmers Reference).
