CSS Text Alignment, How to Use text-align in CSS with Examples

CSS Text Alignment

In CSS, the text-align property is used to control the horizontal alignment of text inside an element. It helps designers and developers present content in a visually appealing and readable format.

What is text-align ?

The text-align property sets the horizontal alignment of inline content (like text) within a block-level element.

Available Values of text-align

Value	Description
left	Aligns text to the left edge (default for most languages).
right	Aligns text to the right edge.
center	Centers the text horizontally.
justify	Spreads text so that it aligns with both the left and right edges. Commonly used for paragraphs.
start	Aligns text based on the start of the writing direction (left in left to right, right in right to left)
end	Aligns text based on the end of the writing direction (right in left to right, left in right to left).

Syntax:

.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.text-justify {
  text-align: justify;
}

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Text Alignment Example</title>
  </head>
  <body>
    <h2>Setting Text Alignment using CSS</h2>

    <p style="text-align: left;">Text Left Alignment.</p>
    <p style="text-align: right;">Text Right Alignment.</p>
    <p style="text-align: center;">Text Center Alignment.</p>
    <p style="text-align: justify; border: 2px solid red; width: 200px; height: 100px;">
      Text Justify Alignment. This alignment aligns the text based on both the margins, left and right.
    </p>
  </body>
</html>

Output:

Key Point

text-align is useful for headings, paragraphs, and content blocks.

justify improves readability for large blocks of text.

start and end are logical properties that respect language direction (good for multilingual sites).