vertical-align attribute

How to align an element vertically with respect to it's parent. The behaviour of this attribute depends on the display attribute, which is typically either "block" or "inline".

For inline elements, the default value of "baseline" means that text and other blocks inside a paragraph will be aligned so that their baselines are in common. This can be altered by setting the attribute to any one of the values shown above. A good example of this is shown in the body of the userguide.

For block elements, values other than "top", "middle" or "bottom" are ignored. Only the first child of the elements parent respects this attribute - the remaining children are positioned according to the previous sibling. Absolutely positioned elements ignore this attribute.

Often setting this attribute will have no effect, as the parent box is usually sized to fit it's children exactly. Notable exceptions are elements whose parent have the height attribute set, elements inside a td element, and paragraphs where multiple sizes of text are used on a single line.

To ease migration from HTML, the "valign" attribute is a synonym, and when this attribute is set on a td element it sets the default vertical alignment for it's children, not itself.

<div height="100" width="100">
  <div height="40" width="40" align="right" vertical-align="bottom"/>
</div>

<p>
  <span font-size="24pt">
    This text is large
  </span>
  <span font-size="12pt" vertical-align="top">
    This text is smaller and top-aligned
  </span>
</p>