CSS text-align - Examples

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

text-align: value;

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

Value	Description	Examples
left	Align text to the left side.	text-align: left;
right	Align text to the right side.	text-align: right;
center	Align text to the center.	text-align: center;
justify	Stretches the lines by introducing space between words or characters, to fit the width of the HTML Element.	text-align: justify;
initial	Sets text-align to default value.	text-align: initial;
inherit	Inherits 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

<!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

<!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

<!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

<!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.