1. css
  2. /properties
  3. /text-align



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.

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.


The text-align property accepts the following values:

startAdjusts alignment to the left if direction is left-to-right, and to the right if it's right-to-left.
endAdjusts alignment to the right if direction is left-to-right, and to the left if it's right-to-left.
leftAligns the inline content to the left edge of its containing line box.
rightAligns the inline content to the right edge of its containing line box.
centerAligns the inline content centrally within the line box.
justifyJustifies 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-parentActs 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

BrowserChromeEdgeSafariFirefoxOperaInternet Explorer

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.

BrowserChromeEdgeSafariFirefoxOperaInternet Explorer

The match-parent Value

BrowserChromeEdgeSafariFirefoxOperaInternet Explorer

For a more detailed breakdown, refer to the first three links in the Useful Resources below.

Useful Resources

Can I use: text-align with flow-relative values

Can I use: text-align with prefixed center, left, and right values

Can I use: text-align: match-parent

W3C's Editor's Draft of CSS Logical Properties and Values Level 1: text-align

W3C's Working Draft of CSS Text Module Level 3: text-align

Accessibility Guidelines for Visual Presentation - WCAG 2.0