CssHow-ToBeginner · 3 min read

How to Set Text-Align in CSS: Simple Guide

Use the text-align property in CSS to set the horizontal alignment of inline content inside a block element. You can set it to values like left, right, center, or justify to control how text lines up inside its container.

📐

Syntax

The text-align property sets the horizontal alignment of inline content inside a block-level element. It accepts several values:

left: Aligns text to the left edge.
right: Aligns text to the right edge.
center: Centers the text horizontally.
justify: Stretches lines so both edges align.

This property affects inline content like text, inline images, and inline blocks inside the container.

css

selector {
  text-align: value;
}

💻

Example

This example shows how to center-align a paragraph's text using text-align. The text inside the paragraph will appear in the middle horizontally.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Align Example</title>
  <style>
    p.centered {
      text-align: center;
      border: 1px solid #ccc;
      padding: 1rem;
      max-width: 400px;
      margin: 2rem auto;
      font-family: Arial, sans-serif;
      font-size: 1.25rem;
    }
  </style>
</head>
<body>
  <p class="centered">This text is centered horizontally inside its container.</p>
</body>
</html>

Output

A paragraph with a gray border and padding, centered horizontally on the page, with the text aligned in the center inside the box.

⚠️

Common Pitfalls

Here are some common mistakes when using text-align:

Trying to align block elements like div with text-align won't work because it only affects inline content inside blocks.
For right-to-left languages, start and end values can be more appropriate than fixed left or right.
Using text-align on inline elements like span has no effect because they don't create a block container.

Example of wrong and right usage:

css

/* Wrong: text-align on inline element has no effect */
span {
  text-align: center; /* No visible effect */
}

/* Right: text-align on block container */
div {
  text-align: center; /* Text inside div will center */
}

📊

Quick Reference

Value	Description
left	Aligns text to the left edge of the container.
right	Aligns text to the right edge of the container.
center	Centers the text horizontally inside the container.
justify	Stretches lines so both left and right edges align.
start	Aligns text to the start edge (left in LTR, right in RTL).
end	Aligns text to the end edge (right in LTR, left in RTL).

✅

Key Takeaways

Use the CSS property text-align on block containers to control horizontal text alignment.

Common values are left, right, center, and justify.

text-align does not work on inline elements like span.

For multilingual sites, consider start and end for better alignment in different languages.

Always apply text-align to the container, not the text itself.