Dynamic HTML: The Definitive Reference

Name

vertical-align — NN n/a IE 4 CSS 1

Synopsis

Inherited: No

There are two sets of values for this attribute, and they affect different characteristics of the inline element to which they are applied. The major point of reference is that an inline element has its own line box that holds its content. Two values, top and bottom, affect how the text is rendered within the line box. The settings bring the text flush with the top or bottom of the box, respectively.

Application of this attribute is not limited to inline spans of text. Images and tables can use this style attribute. All other settings for vertical-align affect how the entire element box is vertically positioned relative to text content of the parent element. The default value, baseline, means that the line box is positioned such that the baselines of both the line box’s text (or very bottom of an element such as an IMG) and the parent text are even. That’s how an EM element can be its own line box element but still look as though it flows on the same baseline as its containing P element. The rest of the attribute constant values (and percentage or length) determine where the element’s line box is set with respect to the parent line.

CSS Syntax

vertical-align: vertAlignType | length | percentage

Value

Two constant values apply to alignment of text within the element itself: bottom | top.

Six constant values apply to alignment of the element’s line box relative to the surrounding text line (of the parent element): baseline