The Web Design Group

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:

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

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 }

CSS Index ~ CSS Structure ~ CSS Properties

Home, Forums, Reference, Tools, FAQs, Articles, Design, Links

Copyright © 1996 - 2006. Web Design Group All rights reserved.