Vertical Alignment

Syntax:	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 }

Maintained by John Pozadzides and Liam Quinn

Home | CSS Tutorials | JavaScript Editor

Get Advanced
JavaScript and Ajax Editor,
Validator and Debugger!
1st JavaScript Editor.

→ R7