CSS, DHTML, and Ajax, Fourth Edition

Traditionally, text is either aligned at its left margin or fully justified (often called newspaper style, in which text is aligned at both left and right margins). In addition, for emphasis or special effect, text can be centered on the screen or even right-justified. The text-align property (Table 4.6) gives you control of the text's alignment and justification.

Table 4.6. Text-Align Values

VALUE

COMPATIBILITY

left

IE3, FF1, S1, O3.5, CSS1

right

IE3, FF1, S1, O3.5, CSS1

center

IE3, FF1, S1, O3.5, CSS1

justify

IE4, FF1, S1, O3.5, CSS1

In this example (Figure 4.6), the level 1 heading and author class have been centered, while the level 2 heading has been right justified, and the copy has been fully justified.

Figure 4.6. The book title and author name are centered, while the chapter number and title are right aligned.

To define text alignment:

1.

text-align:

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

Code 4.6. The h1 tag and author class will be centered, while the h2 tag is right justified, including the chapter Title class.

[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 Horizontally</title> <style type="text/css" media="screen"> <!-- body { font-size: 1.2em; font-family: Georgia, "Times New Roman", times, serif; text-align: left; } h1 { text-align: center; } h2 { text-align: right; } .chapterTitle{ text-align: left; } .author { text-align: center; } p.copy { text-align: justify; } --> </style> </head> <body> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <h2>CHAPTER VI<br /> <span >Pig and Pepper</span></h2> </div> <p >For a minute or two she stood looking at the house, and wondering what to do next, when suddenly a footman in livery came running out of the wood...</p> </body> </html>

2.

center;

Set one of the following alignment styles:

  • left to align the text on the left margin

  • right to align the text on the right margin

  • center to center the text within its area

  • justify to align the text on both the left and right sides

Tips

  • Notice in the example that although the chapterTitle class has been set to left justify, it cannot override the justification of its parent element. Text alignment only applies to block level elements.

  • Fully justifying text may produce some strange results on the screen because spaces between words must be added to make each line the same length. In addition, there is considerable debate about whether full justification helps or hinders readability.

Related

Категории