Vertical-align values

Blue border = <span> border = border identifying the parent box

baseline

Align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom margin edge with the parent's baseline.

baseline

middle

Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

middle x

sub

Lower the baseline of the box to the proper position for subscripts of the parent's box. (This value has no effect on the font size of the element's text.)

sub         H₂O

super

Raise the baseline of the box to the proper position for superscripts of the parent's box. (This value has no effect on the font size of the element's text.)

super         a² + b² = c²

text-top

Align the top of the box with the top of the parent's content area.

Line-height has been set to 3 in the example below to highlight and better illustrate the differences between 'top' and 'text-top'

text-top         ÉÎÈ

top

Align the top of the aligned subtree with the top of the line box.

Line-height has been set to 3 in the example below to highlight and better illustrate the differences between 'top' and 'text-top'

top

text-bottom

Align the bottom of the box with the bottom of the parent's content area.

Line-height has been set to 3 in the example below to highlight and better illustrate the differences between 'bottom' and 'text-bottom'

text-bottom         jpyqg

bottom

Align the bottom of the aligned subtree with the bottom of the line box.

Line-height has been set to 3 in the example below to highlight and better illustrate the differences between 'bottom' and 'text-bottom'

bottom