Text Properties Vertical Alignment

Text Properties

Word Spacing
Letter Spacing
Text Decoration
Vertical Alignment
Text Transformation
Text Alignment
Text Indentation
Line Height

Appearance:

vertical-align: <value>

Possible Values:

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

Initial Value:

baseline

Applies to:

Inline elements

Inherited:

No

The vertical-align property may be used to alter the vertical positioning of an inline element, relative to its parent element or to the element's line. (An inline element is one which has no line break before and after it, for example, EM, A, and IMG in HTML.)

The value may be a percentage relative to the element's line-height property, which would raise the element's baseline the specified amount above the parent's baseline. Negative values are permitted.

The value may also be a keyword. The following keywords affect the positioning relative to the parent element:

· baseline (align baselines of element and parent)

· middle (align vertical midpoint of element with baseline plus half the x-height--the height of the letter "x"--of the parent)

· sub (subscript)

· super (superscript)

· text-top (align tops of element and parent's font)

· text-bottom (align bottoms of element and parent's font)

The keywords affecting the positioning relative to the element's line are

· top (align top of element with tallest element on the line)

· bottom (align bottom of element with lowest element on the line)

The vertical-align property is particularly useful for aligning images. Some examples follow:

IMG.middle { vertical-align: middle }

IMG { vertical-align: 50% }

.exponent { vertical-align: super }