In this section, we will learn what the text-align property is and how to use it in CSS.

Click here to run the example of text-align property.

CSS text-align Property Definition and Usage

Using the CSS `text-align` property, it allows us to control the horizontal alignment of a text content.

CSS text-align Property Syntax

text-align: left|right|center|justify|initial|inherit;

CSS text-align Property Value

This property takes 4 different values as follows:

• Left: This value indicates that the text should be left-aligned.
• Right: This value indicates that the text should be right-aligned.
• Center: Using this value, we can center a text.
• Justify: This value indicates that every text line in a paragraph, with the exception of the last line, should be set to take up the full width of the container element.

Also, this property can take two global values “inherit” and “initial“.

Example: text-align in CSS

See the Pen text-align in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

How Does CSS text-align Property Work?

As you can see, we’ve used the `text-align` property to horizontally align a text content in HTML documents.

Example: CSS align right

See the Pen CSS align right by Omid Dehghan (@enjoytutorials1) on CodePen.

Example: CSS text center

See the Pen CSS text center by Omid Dehghan (@enjoytutorials1) on CodePen.