Web Design in a Nutshell, 2nd Edition

Name

vertical-align

Synopsis

The vertical-align property, as it sounds, affects the vertical alignment of an element. The possible values are as follows:

baseline

Aligns the baseline of text (or bottom of an image) with the baseline of the parent element (this is the default)

bottom

Aligns the bottom of the element with the bottom of the lowest element on the line

middle

Aligns the “vertical midpoint of the element (typically an image) with the baseline plus half the x-height of the parent” (in the words of the CSS1 Specification)

sub

Lowers the element relative to the baseline

super

Raises the element relative to the baseline

text-bottom

Aligns the bottom of the element with the bottom of the parent element’s font (its descenders)

text-top

Aligns the top of the element with the top of the parent element’s font (its ascenders)

top

Aligns the top of the element with the tallest element on the line

percentage values refer to the value of the line-height property of the element.

Values:

baseline|bottom|middle|sub|super|text-bottom|text-top|top|percentage

Example:

IMG.capletter {vertical-align: text-top}

Applies to:

Inline elements

Inherited:

No