HTML and CSS —

Aligning Text

Back in the days of presentational HTML, text was aligned using the align attribute and a corresponding justification value. CSS uses the exact same premise, but, of course, it's done outside the HTML using the text-align property. The values are the same and should be familiar to anyone who's ever used a word processor:

  • left Also referred to as ragged right, left justification sets the text flush left with lines breaking to the right. This is default behavior for all browsers and is the preference for all body text. text-align: left;

  • center This centers the text. Centered text is useful for styling headers, captions, and other accent text. It is very difficult to read long sections of centered text, so it's not best to use for body text. text-align: center;

  • right This places all text flush right, leaving a ragged left edge. text-align: right;

  • justify Justifying text means having the left and right edges be equally flush. This is done by calculating words and spacing within the available line length. It's commonly seen in print newspapers and magazines. It can create a very uniform, attractive look, but most people avoid it because the spacing can appear to be very awkward and, therefore, more difficult to read. text-align: justify;

Figure 9-8 compares a paragraph with each alignment option applied.

Figure 9-8. Left, center, right, and justified text.