Skip to content

Help us create more tutorials! Make a donation using the Donate button or become a member using the button below to hide this banner and track your progress.

Text alignment – CSS

Summary

To change the alignment of an element’s text using CSS, use the text-align property:

selector {
  /* left | right | center | start | end | justify */
  text-align: center;
}

Details

You can use the following values: left, right, center, start, end, and justify.

The left value makes all lines of text line up on the left side of the containing element.

The right value makes all lines of text line up evenly on the right side of the containing element.

The center value centers all lines of text in the containing element.

The start value acts like the left value if the web page is in a left-to-right language and right if the page is using a right-to-left language.

The end value acts like the right value if the web page is in a left-to-right language and left if the page is using a right-to-left language.

The justify value makes all lines of text line up evenly on both the left and the right side of the containing element.

Demo

Exercises

First, recreate the CSS code from the Demo section in your CSS file. Then try changing the value for the property.

Back to: CSS Course > CSS Properties