The Text-Align Property

The text-align property sets the way the lines are adjusted horizontally between the left and right margins of the element.

Name:	text-align
Value:	left | right | center | justify | <string>
Initial:	UA-specific
Applies to:	block-level elements
Inherited:	yes
Percentages:	N/A

This property has four values:

• left Lines are aligned at the left margin; the right margin is ragged (uneven). Sometimes called left-justified.

• right Lines are aligned at the right margin; the left margin is ragged. Sometimes called right-justified.

• center Lines are individually centered in the middle of the box; both the right and left margins are ragged.

• justified Lines are aligned on both the left and right margins; text is spread out between the margins as evenly as possible. Sometimes called fully justified.

Figure 7.1 shows each type of alignment.

Figure 7.1. The four types of horizontal alignment with text-align.

Here's an example rule for changing the alignment of a P element from the default to center:

 P { text-align: center } 

The text-align property is inherited, so you can set the alignment of the entire document by using the BODY element as follows, where we change the alignment from the default to justify:

 BODY { text-align: justify } 

Note: Alignment of text is relative to the width of the element, not the width of the canvas. For example, the text of an element with text-align set to center will be centered between the margins of the element, regardless of where the element is positioned on the canvas. Hence, the text may not appear centered on the canvas.