CSS Text Alignment

CSS Text Alignment controls how text is positioned horizontally within an HTML element. The text-align property lets you align text to the left, right, center, or justify it across the available width.

Text alignment is useful for headings, paragraphs, article content, buttons, and website layouts.

CSS Text Alignment Syntax

The basic syntax is:

selector {
    text-align: value;
}

The text-align property specifies how inline content, including text, is aligned within a block container.

Types of CSS Text Alignment

CSS supports several values for the text-align property:

Value	Description
left	Aligns text to the left
right	Aligns text to the right
center	Centers text
justify	Distributes text across the available line width
start	Aligns text to the start of the writing direction
end	Aligns text to the end of the writing direction

CSS Text Alignment Example

The following example demonstrates different text alignment options.

<!DOCTYPE html>
<html>
<head>
    <title>CSS Text Alignment</title>
    <style>
        .left {
            text-align: left;
        }

        .center {
            text-align: center;
        }

        .right {
            text-align: right;
        }

        .justify {
            text-align: justify;
        }
    </style>
</head>
<body>
    <h2 class="left">Left Aligned Text</h2>
    <h2 class="center">Centered Text</h2>
    <h2 class="right">Right Aligned Text</h2>

    <p class="justify">
        CSS helps developers control the appearance of text
        and other elements on a webpage. Text alignment makes
        content easier to organize and read.
    </p>
</body>
</html>

Each heading uses a different alignment. The paragraph uses justified alignment, which adjusts spacing between words so that the lines generally fill the available width.

CSS Text Alignment for Headings

You can center a heading using a simple CSS rule.

h1 {
    text-align: center;
    color: blue;
}

This rule centers the heading text and makes it blue. Learn more about applying styles in our CSS Element Selector tutorial.

Text Alignment vs. Element Alignment

The text-align property aligns inline content within a block container. It does not directly center an entire block element.

For example, text-align: center can center text inside a <div>, but centering the <div> itself requires a different layout technique.

Explore CSS Backgrounds and CSS Colors to learn more about styling webpage content.