The Vertical-Align Property





The Vertical-Align Property

The vertical-align property lets you raise or lower letters, as well as images, above or below the baseline of text.

Name:

vertical-align

Value:

baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>

Initial:

baseline

Applies to:

inline elements

Inherited:

no

Percentages:

refer to the line height of the element itself


Text is normally aligned on an invisible baseline. The bottoms of the letters are on the baseline no matter what the style, weight, or even size of the letters. Sometimes, a letter or a word has to be raised above the baseline or lowered below the baseline. This is the case with abbreviations that must be superscripted, such as N° (numero), Mme (Madame), and Mlle (Mademoiselle) and for simple mathematics that must be superscripted or subscripted, such as y2 or xi.

vertical-align applies to inline elements, including replaced elements (images) that are inline. These images can be put on the baseline, centered vertically between lines, aligned with the top of the letters, or any of several other possibilities.

This property has three types of values: a keyword, a length, and a percentage. Six of the eight available keywords are relative to the parent:

  • baseline– Aligns the baseline of the child element with the baseline of its parent. This is the default. An element without a baseline, such as an image or object, has its bottom aligned with the parent's baseline.

  • sub– Subscripts the element, that is, aligns the baseline of the element with its parent's preferred position for subscripts. That position normally depends on the font of the parent. If the font does not explicitly define those positions, the browser chooses a "reasonable" (browser-specific) position.

  • super– Superscripts the element, that is, aligns the baseline of the element with its parent's preferred position for superscripts. That position normally depends on the font of the parent. If the font does not explicitly define those positions, the browser chooses a "reasonable" (browser-specific) position.

  • text-top– Aligns the top of the element with the top of its parent's tallest letters. Some people prefer this way of aligning instead of using the value "super."

  • middle– Aligns the vertical midpoint of the element (typically an image) with the baseline plus half the x-height of its parent element, that is, the middle of the parent's lowercase letters. More precisely, the element is centered on a line 0.5ex above the baseline.

  • text-bottom– Aligns the bottom of the element with the bottom of its parent's font.

Here are some example rules using these values of the vertical-align property:


SUP { vertical-align: super; font-size: 7pt }

SUB { vertical-align: sub; font-size: 7pt }

SPAN.index { vertical-align: sub }

IMG.initial { vertical-align: middle }


Figure shows examples of the various alignments that can be obtained using these six values of the vertical-align property.

10. Different ways to vertically align the triangle: (a) baseline; (b) sub; (c) super; (d) text-top; (e) middle; (f) text-bottom.


The "Top" and "Bottom" Keywords

The last two keywords, top and bottom, have definitions that look no more difficult than those of the six just described. The element with vertical-align set to top will have its top aligned with the top of the tallest thing on the line. The value bottom aligns the bottom of the element with the bottom of the lowest thing on the line. Sounds easy enough, doesn't it? Ah, but there's a snake in the grass.

An object that is aligned top or bottom can only be aligned with things that aren't themselves aligned top or bottom, or undefined situations may arise. Figure shows an example: Images 1 and 2 are aligned top and bottom, respectively, but they are aligned to the top and bottom of the text, not to each other, even though they are taller than the text. If they would be aligned to each other, there would be a question as to whether image was aligned to the top of 2 or 2 to the top of 1, and, moreover, where they would be relative to the text.

11. Images 1 and 2 are aligned top, resp., bottom.


By the way, there doesn't actually have to be text on the line. The vertical alignment is done as if there was some text with the font size of the paragraph, in addition to whatever else there is on the line.

The Value as a Percentage or Length

Apart from using the keywords, you may also specify a percentage or length as a value that indicates by how much the element is to be raised or lowered. A value of 50% means the element will be raised by half the element's line height (all elements have a line-height property, even images). Negative values lower the element similarly. Here is an example:


He climbed higher,

<SPAN STYLE="vertical-align: 50%">

and higher,</SPAN>

<SPAN STYLE="vertical-align: 100%">

and higher still ...</SPAN>

<SPAN STYLE="vertical-align: -100%">

until he fell </SPAN>

<SPAN STYLE="vertical-align: -200%">

down!</SPAN>



                               and higher still...
                   and higher,
He climbed higher,
   until he fell
down!


     Python   SQL   Java   php   Perl 
     game development   web development   internet   *nix   graphics   hardware 
     telecommunications   C++ 
     Flash   Active Directory   Windows