The CSS text-align Property

Overview

The text-align property is used to control the horizontal alignment of inline content (for example, text) within a block container. It operates similarly to vertical-align, but in a horizontal direction instead.

Examples and Usage

In the example below, we'll explore how text-align can be used to adjust the horizontal alignment of text inside HTML elements.

HTML Structure

<p class="text-align-example">
  In JavaScript, modules are implemented using the import and export keywords.
  These keywords allow you to import the exports of one module into another,
  and to export the functionality of your own module for others to use.
</p>

CSS Styling

.text-align-example {
  text-align: start; /* aligns content to the start edge of the element */
  border: 2px solid red; /* visual cue for the element boundaries */
}

.text-align-example {
  text-align: end; /* aligns content to the end edge of the element */
}

.text-align-example {
  text-align: center; /* centers content within the element */
}

.text-align-example {
  text-align: justify; /* justifies content within the element */
}

In the CSS snippet, we adjusted the paragraph's inline content alignment. The start and end values situate the content at the respective edges of the block element, in relation to the text direction. Then, the center value positions the text in the middle of the block element, ensuring equal spacing from both edges. Lastly, justify should distribute text evenly across the line, aligning the text to both edges of the block element.

Furthermore, text-align supports other values like left, right, and match-parent. Specifically, left and right values align the content to the respective sides, regardless of text direction. The match-parent value, on the other hand, mimics the parent's computed value, substituting start and end with left or right based on the parent's direction.

Values

The text-align property accepts the following values:

Value	Description
`start`	Adjusts alignment to the left if direction is left-to-right, and to the right if it's right-to-left.
`end`	Adjusts alignment to the right if direction is left-to-right, and to the left if it's right-to-left.
`left`	Aligns the inline content to the left edge of its containing line box.
`right`	Aligns the inline content to the right edge of its containing line box.
`center`	Aligns the inline content centrally within the line box.
`justify`	Justifies the inline content. Text spacing should be adjusted so that the start and end of each line align with the respective edges of the line box, excluding the last line.
`match-parent`	Acts similarly to `inherit`, substituting `start` and `end` with `left` or `right` based on the parent's text direction.

Associated Properties

text-align-last
text-indent
text-justify
vertical-align
direction
margin

Tips and Tricks

The text-align property only controls the inline contents of a block container, not the block element as a whole. To center a block element, consider using the margin property or Flexbox.
Consider accessibility when aligning text. For instance, inconsistent spacing in a justified text could make reading harder for people with dyslexia.
If your text includes multiple scripts with different writing directions (for example, English (LTR) and Arabic (RTL) in the same document), consider using start and end instead of left and right for more predictable results.

Browser Compatibility

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Flow-relative Values start and end

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer
Support	Yes	Yes*	Yes	Yes	Yes*	No

Prefixed center, left, and right Values

While the left, right, and center values are supported through specific prefixing, they're not recommended for newer websites. Instead, the start and end values should be used to achieve better compatibility and to account for different writing modes and text directions.