• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Text Controls > Aligning Text Vertically

Aligning Text Vertically

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

Figure 4.6 shows how the different vertical-alignment types should look.

Figure 4.6. There are a variety of ways to align text relative to other text on the screen.

To define vertical alignment:


Type the property name, followed by a colon (:), in the definition list (Code 4.6).

Code 4.6. Here I'm setting up a class for each of the vertical alignments.


Type a value for the vertical alignment of the text (Table 4.6). Choose one of these 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.7 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.

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

Table 4.6. vertical-align Values
Value Compatibility
super IE4, N6, CSS1
sub IE4, N6, CSS1
baseline IE4, N6, CSS1
<relative> IE5[1], N6, CSS1
<percentage> IE5[2], N6, CSS1

[1] IE.5 in Windows

[2] Mac version only; not available in Windows


Superscript and subscript are used for scientific notation. To express the Pythagorean theorem, for example, you would use superscripts:

a2+ b2=c2

A water molecule might be expressed with subscripts as follows:



Superscript is also great for footnotes in the text, which can then be anchor-linked to notes at the bottom of the current page or to another Web page.

Table 4.7. 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's text
text-bottom Bottom to bottom of parent element's text

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint