CSS text-align Property

CSS text-align property sets the horizontal alignment of the text in HTML Element(s).

The syntax to specify a value for text-align property is

</>
Copy
text-align: value;

The following table gives the possible values that could be given to text-align property.

ValueDescriptionExamples
leftAlign text to the left side.text-align: left;
rightAlign text to the right side.text-align: right;
centerAlign text to the center.text-align: center;
justifyStretches the lines by introducing space between words or characters,
to fit the width of the HTML Element.		text-align: justify;
initialSets text-align to default value.text-align: initial;
inheritInherits text-align value from its parent element.text-align: inherit;

Examples

In the following examples, we align the text in HTML Element(s), using text-align property, with different possible values.

text-align: left;

In the following example, we set the alignment of text in the HTML Element, to left, using text-align property.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            text-align: left;
        }
    </style>
</head>
<body>
    <p id="p1">This is left aligned text.</p>
</body>
</html>

text-align: right;

In the following example, we set the alignment of text in the HTML Element, to right, using text-align property.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            text-align: right;
        }
    </style>
</head>
<body>
    <p id="p1">This is right aligned text.</p>
</body>
</html>

text-align: center;

In the following example, we set the alignment of text in the HTML Element, to center, using text-align property.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            text-align: center;
        }
    </style>
</head>
<body>
    <p id="p1">This is center aligned text.</p>
</body>
</html>

text-align: justify;

In the following example, we set the alignment of text in the HTML Element, to justify the width of the element, using text-align property.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            text-align: justify;
        }
    </style>
</head>
<body>
    <p id="p1">The text alignment of this text is justified. The text alignment of this text is justified. The text alignment of this text is justified. The text alignment of this text is justified. The text alignment of this text is justified. The text alignment of this text is justified.</p>
</body>
</html>

Resize the browser window, and observe the text alignment.

Conclusion

In this CSS Tutorial, we learned about text-align property, and how to use this property for HTML Elements, with examples.