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         H2O
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         a2 + b2 = c2
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

Valid HTML 4.01 strict! CSS compliant