CSS 'text-align' Property: Complete Reference

What is the `text-align` Property?

The CSS text-align property controls the horizontal alignment of inline-level content (such as text, images, or inline elements) inside a block-level container. It defines how the content is distributed between the left and right edges of the element's content box. This property is a cornerstone of typography and layout in web design, enabling developers to create clear, readable, and visually balanced interfaces.

Why It Matters

Proper text alignment improves readability, user experience, and aesthetic consistency across web pages. Left-aligned text is standard for left-to-right languages (e.g., English) because it provides a consistent starting point for the eye. Right-aligned text is useful for right-to-left languages (e.g., Arabic, Hebrew) or for aligning data in tables. Centered text is often used for headings, banners, or call-to-action elements, while justified text creates clean edges on both sides, commonly seen in print and formal documents. Choosing the correct alignment ensures content feels intentional and accessible.

How to Use It

The text-align property accepts the following values:

left – aligns text to the left edge
right – aligns text to the right edge
center – centers text horizontally
justify – spreads text so that each line has equal width (except the last line)
start – aligns text to the start of the writing direction (same as left in LTR, right in RTL)
end – aligns text to the end of the writing direction (same as right in LTR, left in RTL)
inherit – takes the computed value from the parent element
initial – resets to the default value (left for LTR, right for RTL)
unset – acts as inherit if the property is inherited, otherwise initial

Basic syntax:

selector {
  text-align: value;
}

Example 1: Left alignment

p.left-align {
  text-align: left;
}

Example 2: Right alignment

p.right-align {
  text-align: right;
}

Example 3: Center alignment

h1.centered {
  text-align: center;
}

Example 4: Justified alignment

article.justified {
  text-align: justify;
}

Example 5: Using logical values (start/end)

.logical-start {
  text-align: start; /* left in LTR, right in RTL */
}

.logical-end {
  text-align: end;   /* right in LTR, left in RTL */
}

Practical Code Examples

Below is a complete HTML document demonstrating various text-align values:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>text-align Demo</title>
  <style>
    .box {
      border: 1px solid #ccc;
      padding: 10px;
      margin: 10px 0;
      width: 300px;
    }
    .left   { text-align: left; }
    .right  { text-align: right; }
    .center { text-align: center; }
    .justify { text-align: justify; }
  </style>
</head>
<body>
  <div class="box left">
    <strong>Left aligned:</strong> This text is flush against the left edge.
  </div>
  <div class="box right">
    <strong>Right aligned:</strong> This text is flush against the right edge.
  </div>
  <div class="box center">
    <strong>Centered:</strong> This text is centered in the box.
  </div>
  <div class="box justify">
    <strong>Justified:</strong> This longer text demonstrates how extra spacing is added between words so that each line reaches both edges. Notice the last line remains left-aligned.
  </div>
</body>
</html>

Additionally, text-align works on block-level elements and can align inline children. For inline-block or inline elements inside a block, the alignment is relative to the parent's width:

<div style="text-align: center;">
  <span style="display: inline-block;">This span is centered</span>
</div>

Best Practices

Respect reading direction: Use left or start for left-to-right languages and right or end for right-to-left languages. Prefer logical values (start/end) when building multilingual sites.
Use justification sparingly: Justified text can cause uneven word spacing and “rivers” of whitespace, especially on narrow screens. Reserve it for print-like layouts or large blocks of body text.
Combine with other properties: For vertical alignment, use vertical-align (on inline/inline-block elements) or flexbox/grid. For complete centering of a block element, use margin: auto or flexbox.
Avoid overusing center alignment: Centered text is harder to read in long paragraphs because the starting point varies. Use it for short headings, buttons, or decorative text.
Test on multiple devices: Justified text may appear differently across browsers and font sizes. Always preview on mobile screens where line lengths are short.
Remember inheritance: text-align is inherited by default, so setting it on a parent element affects all children unless overridden.
Use text-align-last for fine control: The text-align-last property lets you specify how the last line of a justified block is aligned (e.g., text-align-last: center).

Conclusion

The CSS text-align property is a fundamental tool for controlling horizontal text alignment in web layouts. By understanding its various values—left, right, center, justify, start, end, and their logical counterparts—you can create readable, culturally appropriate, and visually harmonious interfaces. Combine it with other alignment techniques like flexbox, grid, and vertical-align for complete control over element positioning. Always consider the reading direction of your audience, test across viewports, and use justification with care. Mastering text-align ensures your typography communicates clearly and effectively, enhancing both design and usability.