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:

1.

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

2.

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:

    a2+ b2 = c2

    A water molecule might be expressed with subscripts as follows:

    H20

    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

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net