How to Left, Center, and Right Align Text using CSS
![CSS](/images/CSS.png)
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:
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:
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:
This produces the following heading:
Home Alone
The following above is a right-aligned text.