Text alignment in CSS

Setting the alignment of text is quite simple in CSS. The CSS text-align property is used to set the alignment of the text horizontally. As per requirement, you can use the left, right, and center values in the text-align property.

An align center example

The default alignment value of the align property is left if the direction property value is ltr (which is the default). If direction property value is set to rtl then default alignment will be right.

Align right example

To align text vertically, see its respective chapter. This chapter will only explain CSS horizontal align property/values.

See the following examples of using the text-align CSS property for horizontal alignment using different values in different elements.

Align center using CSS text align in div element

The following example shows how to use the text-align property. We will set a div element aligned to center. Also, we will use align center value in <h1> and <h2> tags. You may have a look by clicking the image or link below:

Experience this example online

As you can see in the demo, the div alignment is the center (3rd element from top). Also, the headings are also centralized by using the center value in the text-align property.

An align right example

This example sets the text alignment to the right of a div and headings (h1,h2) by using text align property.

Also, we used the direction property to rtl for heading (h1), so if you do not set the text-align as right for <h1>, the default is still the right.

Experience this example online

 

Further: CSS line-height | CSS vertical-align