- Alignment: Text
- Using P to Align Text
- Using DIV to Align Blocks of Text
- CENTER
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Using P to Align Text
The P tag is used to place a block of text within a paragraph. Normally, the purpose for this tag is to apply vertical spacing between paragraphs as a visual cue. You can also use paragraphs to specify horizontal alignment for your text by using the ALIGN attribute.
For example, to create a paragraph of text you could enclose it in <P> and </P>, like this:
<P>Joan Farber is a freelance illustrator, designer, fine artist, and teacher who has done work for such notable companies as American Express, CBS Records, Redken, MCI, Cosmopolitan, Playboy and Vogue Magazines. With her early roots as a fashion illustrator, Joan has developed a style of illustration which has become popular in recent years, utilizing a skillfully calligraphic brush stroke which brings an elegance and sophistication to any image. </P>
In practice, the end tag (/P) is rarely necessary, so you don't see it very often. We use it here only to show that P creates a container with both a beginning and an end. By default, most browsers will display paragraphs of text left-aligned—that is, with a ragged right-margin.
Figure 2 shows what the previous code looks like in Netscape Navigator.
){kind=link}
Figure 2 The default left-alignment of text in Netscape Navigator.
If you want different alignment, you must specify it. The P tag may be used with the ALIGN attribute, as follows:
<P ALIGN=RIGHT> Joan Farber is a freelance illustrator, designer, fine artist, and teacher who has done work for such notable companies as American Express, CBS Records, Redken, MCI, Cosmopolitan, Playboy and Vogue Magazines. With her early roots as a fashion illustrator, Joan has developed a style of illustration which has become popular in recent years, utilizing a skillfully calligraphic brush stroke which brings an elegance and sophistication to any image. </P>
With the ALIGN=RIGHT attribute, the paragraph is displayed with the right side aligned and the left side ragged (see Figure 3).
){kind=link}
Figure 3 A paragraph in Netscape with ALIGN=RIGHT.
The ALIGN attribute can also be set to CENTER or JUSTIFY. The CENTER alignment will center each line in a paragraph.
Figure 4 A paragraph in Netscape with ALIGN=CENTER.
){kind=link}
The JUSTIFY alignment will align both sides to their margins.
Figure 5 A paragraph in Netscape with ALIGN=JUSTIFY.
){kind=link}
The usefulness of this setting is somewhat reduced by the way it is implemented. In order to justify both margins, spaces are inserted between words, but not between letters. This results in lines of text like the second-to-last line in our example. The spaces between the words are so large that they really detract from the overall value of the technique.
The ALIGN=JUSTIFY setting exaggerates a long-time problem with the Netscape browser: The right margin is larger than the left. This is true in all versions of the Netscape browser, but it's much more noticeable with justified text. Using style sheets and/or frames, it is possible to overcome this limitation, but it's pretty obvious that the margins don't match in the simple justified paragraph.
Another important point to mention is that these margins are defined by the width of the browser. This means that if someone has their browser window maximized to the width of the screen, the lines of type will be quite long. It's also possible to use the ALIGN=JUSTIFY setting with tables to limit the width of text lines. (We'll cover this technique in the "Alignment: Tables" article later in this series.)