CSS Text-Align Property

The text-align property specifies how to align text horizontally. Possible values are:

left: left-justified

right: right-justified

center: text is centered

justify: text is both right- and left-justified

Several examples are shown below:

Example 1: Left align

CSS Declaration

p {text-align: left;}

The following HTML,

<p>This paragraph is an example of left justification.

renders:

This paragraph is an example of left justification.

In Example 1, both lines are aligned to the left. This is the default behavior–without specifying text-align, this is what we would see.

Example 2: Right align

CSS Declaration

p {text-align: right;}

The following HTML,

<p>This paragraph is an example of right justification.

renders:

This paragraph is an example of right justification.

In Example 2, both lines are aligned to the right.

Example 3: Aligned to the center

CSS Declaration

p {text-align: center;}

The following HTML,

<p>This paragraph is an example of being aligned to the center.

renders:

This paragraph is an example of being aligned to the center.

In Example 3, the paragraph is centered.

Example 4: Justified

CSS Declaration

p {text-align: justify;}

The following HTML,

<p>This paragraph is an example of full justification.

renders:

This paragraph is an example of full justification.

In Example 4, the first line is aligned to both the left edge and right edge. As a result, there is more empty space between the words to achieve this effect.

Next: CSS Text-Decoration

AdBlock Detected!