CSS Text & Fonts

CSS Text Alignment

The CSS Text Alignment property is used to control the horizontal alignment of text inside an element.

By default, most text is aligned to the left. Using the text-align property, you can align text to the:

Left
Center
Right
Justify

Text alignment is commonly used in headings, paragraphs, navigation menus, and page layouts to improve readability and presentation.

Syntax

CSS Text Alignment Syntax

css

selector {
    text-align: value;
}

CSS Text Alignment Example

css

h1 {
    text-align: center;
}

This centers the text inside all <h1> elements.

Attributes

Value	Description	Example
left	Aligns text to the left	text-align: left;
center	Centers the text	text-align: center;
right	Aligns text to the right	text-align: right;
justify	Stretches text to align both left and right edges	text-align: justify;
inherit	Inherits alignment from parent element	text-align: inherit;

Example

CSS Text Alignment Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Text Alignment Example</title>
    <style>
        .left {
            text-align: left;
        }
        .center {
            text-align: center;
        }
        .right {
            text-align: right;
        }
        .justify {
            text-align: justify;
        }
    </style>
</head>
<body>
    <h1 class="center">Centered Heading</h1>
    <p class="left">This paragraph is aligned to the left.</p>
    <p class="right">This paragraph is aligned to the right.</p>
    <p class="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This text is justified so that both the left and right edges appear aligned.</p>
</body>
</html>

Output

Browser Output

css

The heading will appear center aligned
The first paragraph will appear left aligned
The second paragraph will appear right aligned
The third paragraph will appear justified, with text stretching evenly between both margins

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

Notes

left is the default alignment for most languages written left-to-right.
center is commonly used for headings and banners.
right is useful for specific design layouts and right-to-left languages.
justify creates clean paragraph edges similar to newspapers and magazines.
Text alignment affects inline content within an element.

Conclusion

The CSS Text Alignment property helps control how text is positioned within an element. Whether you need left-aligned paragraphs, centered headings, right-aligned content, or justified text, text-align provides a simple and effective solution for improving page layout and readability.

PreviousCSS Text Color NextCSS Text Decoration