CSS Property - Vertical Align

Value: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
Initial: baseline
Applies to: inline elements
Inherited: no
Percentage values: refer to the "line-height" of the element itself

The CSS property "vertical-align" affects the vertical positioning of the element. One set of keywords is relative to the parent element:

• baseline:
  align the baseline of the element (or the bottom, if the element doesn"t have a baseline) with the baseline of the parent

• middle:
  align the vertical midpoint of the element (typically an image) with the baseline plus half the x-height of the parent

• sub:
  subscript the element

• super:
  superscript the element

• text-top:
  align the top of the element with the top of the parent element"s font

• text-bottom:
  align the bottom of the element with the bottom of the parent element"s font

Another set of properties are relative to the formatted line that the element is a part of:

• top:
  align the top of the element with the tallest element on the line

• bottom:
  align the bottom of the element with the lowest element on the line

Using the "top" and "bottom" alignment, unsolvable situations can occur where element dependencies form a loop.

Percentage values refer to the value of the "line-height" property of the element itself. They raise the baseline of the element (or the bottom, if it has no baseline) the specified amount above the baseline of the parent.

Negative values are possible. E.g., a value of "-100%" will lower the element so that the baseline of the element ends up where the baseline of the next line should have been. This allows precise control over the vertical position of elements (such as images that are used in place of letters) that don"t have a baseline.

It is expected that a future version of CSS will allow <length> as a value on this property.