CSS text-align Property

What You’ll Learn

The text-align property controls how text is aligned horizontally inside block-level elements like paragraphs, headings, and divs.

Introduction

The text-align property in CSS is used to set the horizontal alignment of text within an element. This property is commonly applied to block-level elements like paragraphs and headings to control the alignment of their text content.

The text-align property can take several values, allowing for versatile text alignment options that enhance the readability and visual appeal of your web pages.

Definition and Usage

Apply text-align to the container element that holds the text. It affects inline content such as text, images, and inline elements inside that block.

Use center for headings and hero text, left or start for body copy, and justify for long paragraphs that should fill the full line width.

📝 Syntax

The syntax for the text-align property is simple. It is applied to an element using the following format:

element {
  text-align: value;
}

Here, value can be one of the predefined keywords that specify the alignment.

Basic Example

p {
  text-align: center;
}

Syntax Rules

• Apply the property to the block container, not to each word individually.
• The property is inherited, so child elements receive the same alignment unless overridden.
• Use logical values start and end for multilingual and RTL-friendly layouts.
• justify works best on paragraphs with enough text to fill multiple lines.

Related Properties

• text-align-last — aligns the last line of a block
• line-height — controls vertical spacing between lines
• direction — sets text direction for RTL layouts

🎯 Default Value

The default value of the text-align property is left. This means that, unless otherwise specified, text within block-level elements is aligned to the left in left-to-right languages.

💎 Property Values

When to Use text-align

text-align is one of the most common typography properties on the web:

• left / start — Body paragraphs, articles, and form labels in LTR layouts.
• center — Headings, hero sections, captions, and call-to-action text.
• right / end — Price labels, metadata, and numeric columns in some designs.
• justify — Long-form content such as blog posts or documentation paragraphs.
• table cells — Align content inside th and td elements.

Examples Gallery

Start with center and justify from the reference example, then explore left/right alignment, logical values, and a common heading plus body pattern.

<style>
  .center {
    text-align: center;
  }
  .justify {
    text-align: justify;
  }
</style>

<p class="center">This paragraph is center-aligned.</p>
<p class="justify">This paragraph is justified...</p>

.article-body { text-align: left; }
.price-tag { text-align: right; }

.intro { text-align: start; }
.footnote { text-align: end; }

.article-title {
  text-align: center;
}

.article-body {
  text-align: left;
  max-width: 42rem;
  margin: 0 auto;
}

text-align in the family

text-align handles horizontal alignment of inline content. Pair it with line-height for readable line spacing and text-align-last when you need special control over the final line of a paragraph.

.article {
  text-align: left;
  line-height: 1.6;
}

💡 Best Practices