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




IE4, FF1, S1, O3.5, CSS1


IE4, FF1, S1, O3.5, CSS1


IE4, FF1, S1, O3.5, CSS1


IE5[*], FF1, S1, O3.5, CSS1


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:



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" " DTD /xhtml1-strict.dtd"> <html xmlns=""> <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



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




    Top to highest element in line


    Middle to middle of parent


    Bottom to lowest element in line


    Top to top of parent element'fs text


    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).


  • 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:


    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.

CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: