CSS text-align Property

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.


  text-align: right;
  text-align: left;
  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:


  direction: ltr;
  direction: rtl;
  text-align: start;
  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:

leftAligns the text to the left side.
rightAligns the text to the right side.
centerAligns the text in the center.
startAligns left for LTR writing direction and right for RTL writing direction.
endAligns right for LTR writing direction and left for RTL writing direction.
justifyInserts white space between words to cover the full width of the element.
initialSets the text-align property to its default value(left for LTR and right for RTL)
inheritInherits the text-align property from the parent element.

General Info

Default Valueleft for LTR writing direction and right for RTL writing direction
JavaScript Usageelement.style.textAlign = “center”