Aligning Text Vertically

With the vertical-align property, you can specify the vertical position of one inline element relative to the elements around it, either above or below. This means that the vertical-align property (Table 4.7) can be used only with inline tags and table tagstags without a break before or after them, such as the anchor (<a>), image (<img>), bold (<b>), italic (<i>), and table data (<td>) tags.

Table 4.7. Vertical-Align Values
VALUE	COMPATIBILITY
super	IE4, FF1, S1, O3.5, CSS1
sub	IE4, FF1, S1, O3.5, CSS1
baseline	IE4, FF1, S1, O3.5, CSS1
<length>	IE5^[*], FF1, S1, O3.5, CSS1
<percentage>	IE5^[**], FF1, S1, O3.5, CSS1

^[*] IE5.5 in Windows

^[**] IE7 in Windows

This example (Figure 4.7) shows how the different vertical-alignment types should look.

Figure 4.7. There are a variety of ways to align text relative to other text on the screen. The lines are shown as a guide for where the text is aligning.

To define vertical alignment:

vertical-align:

Type the vertical-align property name, followed by a colon (:), in the definition list (Code 4.7).

Code 4.7. I've set up a class for each vertical alignment type.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/ DTD /xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS, DHTML &amp; Ajax | Aligning Text Vertically</title> <style type="text/css" media="screen"> <!-- body {      font-size: xx-large;      font-family: Georgia, "Times New Roman", times, serif;      text-align: left; } .superscript      vertical-align: super;      font-size: small; } .baseline {      vertical-align: baseline;      font-size: small; } .subscript {      vertical-align: sub;      font-size: small; } .top {      vertical-align: top;      font-size: small; } .middle {      vertical-align: middle;      font-size: small; } .bottom {      vertical-align: bottom;      font-size: small; } .texttop {      vertical-align: text-top;      font-size: small; } .textbottom {      vertical-align: text-bottom;      font-size: small; } .normal {      font-weight: bold; } --> </style> </head> <body> <p >Alice <span >Baseline</span></p> <p >Alice <span >Superscript</span></p> <p >Alice <span >Subscript</span></p> <p >Alice <span >Top</span></p> <p >Alice <span >Middle</span></p> <p >Alice <span >Bottom</span></p> <p >Alice <span >Text-Top</span></p> <p >Alice <span >Text-Bottom</span></p> </body></html

super;

Type a value for the vertical alignment of the text. Choose one of the following options:

super, which superscripts the text above the baseline.
sub, which subscripts the text below the baseline.
baseline, which places the text on the baseline (its natural state).

A relative value from Table 4.8 that sets the element's alignment relative to its parent's alignment. To align the top of your text with the top of the parent element's text, for example, type text-top.

Table 4.8. Setting an Element's Position Relative to the Parent Element
TYPE THIS	TO GET THE ELEMENT TO ALIGN LIKE THIS
top	Top to highest element in line
middle	Middle to middle of parent
bottom	Bottom to lowest element in line
text-top	Top to top of parent element'fs text
text-bottom	Bottom to bottom of parent element's text

A percentage value, which raises or lowers the element's baseline proportionate to the parent element's font size (25%, for example).

Tips

Superscript and subscript are used for scientific notation. To express the Pythagorean theorem, for example, you would use superscripts:
a²+ b² = c²
A water molecule might be expressed with subscripts as follows:
H₂0
However, keep in mind that neither sub-nor superscript will reduce the size of the text, so you may also want to include font-size in your definition for true scientific notation style (see "Setting the Font Size" in Chapter 3).
Superscript is also great for footnotes in the text, which can then be hyperlinked to notes at the bottom of the current page or to another Web page.
It's a good idea to reserve vertical alignment for relative positioning with another element or in a table data cell. For more exact positioning, use the position properties explained in Chapter 7.

Table 4.7. Vertical-Align Values

Figure 4.7. There are a variety of ways to align text relative to other text on the screen. The lines are shown as a guide for where the text is aligning.

Code 4.7. I've set up a class for each vertical alignment type.

Table 4.8. Setting an Element's Position Relative to the Parent Element