The vertical-align property in CSS has given gray hair to many a starting css coder until they finally realized what this property is, and what it is not.
This property does not vertically align elements inside a box element. It is not the CSS equivalent for the HTML attribute valign="middle".
Vertical-align aligns the content inline. This means it is vertically aligned in comparison to the elements right before and after, and not in reference to parent/child. This means that this property can align text within a line or inside a <td>.
To demo this we make this text smaller
<p style="font-size: 2.7em;">To see text vertically aligned
<span style="vertical-align: middle; font-size: 0.3em;">we make it smaller</span>