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.