How to Left, Center, and Right Align Text using CSS

In this tutorial, we show how left align, center align, and right align text using CSS.

We can use CSS to align text to the left of a page, the center of a page or the right of a page.

Look below at these three headings to see the difference between these 3 alignments:

Left Alignment Heading

Center Alignment Heading

Right Alignment Heading

To align text in a web page, we use the CSS function text-align: and then assign it either left, center, or right to align it the way we want the text.

Left Aligned Text

To left-align text in a web page, we add the following line of CSS to the tag of block text we want to align left. In this case we are styling a header tag, h1, to be left aligned:

h1 { text-align:left; }

This produces the following heading:

Home Alone

The following above is a left-aligned text.

Center Aligned Text

To center-align text in a web page, we add the following line of CSS to the tag of block text we want to center align:

h1 { text-align:center; }

This produces the following heading:

Home Alone

The following above is a center-aligned text.

Right Aligned Text

To right-align text in a web page, we add the following line of CSS to the tag of block text which we want to align right:

h1 { text-align:right; }

This produces the following heading:

Home Alone

The following above is a right-aligned text.