back

Vertical-Align

Vertical-align is used to specify how inline elements align themselves relative to others.
It only works on inline or inline-block elements like <span>'s or <img>'s, it doesn't work on block elements like <div>'s.
When applied to table cells, it affects the contents of the cell.
The options are:
(1) Baseline, the default value, the element is aligned with the baseline of its parent element.
(2) Middle, aligns the element in the middle of its parent.
(3) Top, aligns the top of the element with the top of the line.
(4) Bottom, aligns the bottom of the element with the bottom of the line.
(5) Text-Top, aligns the top of the element with the top of its parents font.
(6) Text-Bottom, aligns the bottom of the element with the bottom of its parents font.
(7) Sub, aligns the element as if it were subscripted.
(8) Super, aligns the element as if it were superscripted.
(9) Length, allows you to set a value (for example in px or cm), the element will be raised or lowered from the baseline by this amount. A positive value goes up while negative goes down.
(10) Percentage, allows you to set a value as a percentage, the element will be raised or lowered from the baseline by this amount. A positive value goes up while negative goes down.

Example