CSS Vertical-align

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>.

Example:

To demo this we make this text smaller

HTML/CSS:


<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>

</p>