CSS text-align Property
CSS text-align property sets the horizontal alignment of the text in HTML Element(s).
The syntax to specify a value for text-align property is
text-align: value;
The following table gives the possible values that could be given to text-align property.
| Value | Description | Examples |
|---|---|---|
| left | Align text to the left side. | text-align: left; |
| right | Align text to the right side. | text-align: right; |
| center | Align text to the center. | text-align: center; |
| justify | Stretches the lines by introducing space between words or characters, to fit the width of the HTML Element. | text-align: justify; |
| initial | Sets text-align to default value. | text-align: initial; |
| inherit | Inherits text-align value from its parent element. | text-align: inherit; |
Examples
In the following examples, we align the text in HTML Element(s), using text-align property, with different possible values.
text-align: left;
In the following example, we set the alignment of text in the HTML Element, to left, using text-align property.
index.html
text-align: right;
In the following example, we set the alignment of text in the HTML Element, to right, using text-align property.
index.html
text-align: center;
In the following example, we set the alignment of text in the HTML Element, to center, using text-align property.
index.html
text-align: justify;
In the following example, we set the alignment of text in the HTML Element, to justify the width of the element, using text-align property.
index.html
Resize the browser window, and observe the text alignment.
Conclusion
In this CSS Tutorial, we learned about text-align property, and how to use this property for HTML Elements, with examples.