text-align

Definition

The text-align CSS property is used to control the horizontal alignment of text within a block-level element. It allows you to specify how the text content should be positioned within its container.

The text-align property accepts several values:

• left: Aligns the text to the left edge of the container.
• right: Aligns the text to the right edge of the container.
• center: Centers the text horizontally within the container.
• justify: Adjusts the spacing between words in the text so that it fills the entire width of the container. This creates a straight left and right edge.

Here’s an example:

.text-container {
  text-align: center;
}

In this example, the .text-container class sets the text-align property to center. This centers the text horizontally within the container.

It’s important to note that the text-align property affects the alignment of inline or inline-block elements, as well as the text content within them. It does not have any impact on the alignment of block-level elements.

Additionally, the text-align property can be overridden by more specific styles applied to child elements. For example, if you have a <p> element inside a container, and you apply text-align: center to the container, but also apply text-align: left to the <p> element, the <p> element will have left-aligned text within the centered container.

The text-align property is commonly used to control the alignment of text within headings, paragraphs, or other text-based elements. It provides flexibility in positioning and helps achieve the desired visual appearance and readability of text content.

Syntax

.hero-copy {
  text-align: center;
}

Values

• start / end: align text respecting writing mode (preferred over left/right).
• left / right: physical alignment keywords (legacy).
• center: center inline content within the container.
• justify: distribute spacing across the line so edges align.

Practical Examples

.hero-copy {
  text-align: center;
}

Switch alignment per breakpoint or container to guide the reading experience.

<div class="grid gap-4 sm:grid-cols-2">
  <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm text-left">
    <h3 class="text-base font-semibold text-slate-900">Left aligned</h3>
    <p class="text-sm text-slate-600">Default browser alignment keeps copy flush with the start edge.</p>
  </div>
  <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm text-center">
    <h3 class="text-base font-semibold text-slate-900">Centered</h3>
    <p class="text-sm text-slate-600">Using <code>text-align: center</code> highlights short marketing blurbs.</p>
  </div>
</div>

Tips & Best Practices

• Use logical keywords (start/end) so alignment adapts in RTL layouts.
• Pair with max-width to keep centered paragraphs readable.
• Use text-align: justify sparingly; adjust hyphens and word-spacing for better results.

Accessibility & UX Notes

Ensure centered text remains concise—long centered paragraphs can be harder to track.

Browser Support

Supported across all browsers, including older engines.

Related

• margin and max-width for layout centering.
• text-justify for controlling justification algorithms.
• direction / writing-mode for internationalization.