CSS text-align property defines the horizontal alignment of the text inside an element. The text can be aligned to the left, right, or center.
The text-align property only works with the block-level elements.
Example:
.p1{
text-align: right;
}
.p2{
text-align: left;
}
.p3{
text-align: center;
}
CSS3 introduced two new values start and end. These values are more dynamic than left or right, as they change with the writing direction.
For example: English is written left-to-right(LTR) and Arabic is written right-to-left(RTL). So, using text-align: left; or text-align: right; does not make any sense for the Arabic language. Because left and right are just reversed in case of a right-to-left writing direction language.
So, for an LTR writing direction language, start means left and end means right. While for an RTL writing direction language start means right and end means left. See the example below:
Example:
.div1{
direction: ltr;
}
.div2{
direction: rtl;
}
.p1{
text-align: start;
}
.p2{
text-align: end;
}
CSS Syntax
The text-align property has the following syntax:
text-align: left|right|center|start|end|justify|initial|inherit;
Property Values
The text-align property accepts the following values:
| left | Aligns the text to the left side. |
| right | Aligns the text to the right side. |
| center | Aligns the text in the center. |
| start | Aligns left for LTR writing direction and right for RTL writing direction. |
| end | Aligns right for LTR writing direction and left for RTL writing direction. |
| justify | Inserts white space between words to cover the full width of the element. |
| initial | Sets the text-align property to its default value(left for LTR and right for RTL) |
| inherit | Inherits the text-align property from the parent element. |
General Info
| Default Value | left for LTR writing direction and right for RTL writing direction |
| Inherited | Yes |
| JavaScript Usage | element.style.textAlign = “center” |
