Web/CSS/text-align

The text-align CSS property sets the horizontal alignment of a block element or table-cell box. This means it works like vertical-align but in the horizontal direction.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Syntax

/* Keyword values */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;

/* Character-based alignment in a table column */
text-align: ".";
text-align: "." center;

/* Block alignment values (Non-standard syntax) */
text-align: -moz-center;
text-align: -webkit-center;

/* Global values */
text-align: inherit;
text-align: initial;
text-align: unset;

The text-align property is specified in one of the following ways:

• Using the keyword values start, end, left, right, center, justify, justify-all, or match-parent.
• Using a <string> value only, in which case the other value defaults to right.
• Using both a keyword value and a <string> value.

Values

start '

The same as left if direction is left-to-right and right if direction is right-to-left.

end '

The same as right if direction is left-to-right and left if direction is right-to-left.

left

The inline contents are aligned to the left edge of the line box.

right

The inline contents are aligned to the right edge of the line box.

center

The inline contents are centered within the line box.

justify

The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.

justify-all '

Same as justify, but also forces the last line to be justified.

match-parent '

Similar to inherit, but the values start and end are calculated according to the parent's direction and are replaced by the appropriate left or right value.

<string> '

When applied to a table cell, specifies the alignment character around which the cell's contents will align.

Accessibility concerns

The inconsistent spacing between words created by justified text can be problematic for people with cognitive concerns such as Dyslexia.

• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0

Formal definition

Initial value	start, or a nameless value that acts as left if direction is ltr, right if direction is rtl if start is not supported by the browser.
Applies to	block containers
Inherited	yes
Computed value	as specified, except for the match-parent value which is calculated against its parent's direction value and results in a computed value of either left or right
Animation type	discrete

Formal syntax

start | end | left | right | center | justify | match-parent

Examples

Left alignment

HTML

<p class="example">
  Integer elementum massa at nulla placerat varius.
  Suspendisse in libero risus, in interdum massa.
  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

CSS

.example {
  text-align: left;
  border: solid;
}

Centered text

HTML

<p class="example">
  Integer elementum massa at nulla placerat varius.
  Suspendisse in libero risus, in interdum massa.
  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

CSS

.example {
  text-align: center;
  border: solid;
}

Justify

HTML

<p class="example">
  Integer elementum massa at nulla placerat varius.
  Suspendisse in libero risus, in interdum massa.
  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

CSS

.example {
  text-align: justify;
  border: solid;
}

Notes

The standard-compatible way to center a block itself without centering its inline content is setting the left and right margin to auto, e.g.:

.something {
  margin: auto;
}

.something {
  margin: 0 auto;
}

.something {
  margin-left: auto;
  margin-right: auto;
}

Specifications

Specification	Status	Comment
CSS Logical Properties and Values Level 1The definition of 'text-align' in that specification.	Editor's Draft	No changes
CSS Text Module Level 4The definition of 'text-align' in that specification.	Editor's Draft	Added the <string> value.
CSS Text Module Level 3The definition of 'text-align' in that specification.	Working Draft	Added the start, end, and match-parent values. Changed the unnamed initial value to start (which it was).
CSS Level 2 (Revision 1)The definition of 'text-align' in that specification.	Recommendation	No changes
CSS Level 1The definition of 'text-align' in that specification.	Recommendation	Initial definition

Browser compatibility

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
text-align	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 3	Opera Full support 3.5	Safari Full support 1	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
Prefixed center, left, and right values for block alignment Deprecated'Non-standard'	Chrome Full support 1 Prefixed' Full support 1 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Edge Full support 79 Prefixed' Full support 79 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Full support 1 Prefixed' Full support 1 Prefixed' Prefixed' Implemented with the vendor prefix: -moz-	IE No support No	Opera Full support 15 Prefixed' Full support 15 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari Full support 1.3 Prefixed' Full support 1.3 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 1 Prefixed' Prefixed' Implemented with the vendor prefix: -khtml-	WebView Android Full support 37 Prefixed' Full support 37 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Chrome Android Full support 18 Prefixed' Full support 18 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Android Full support 4 Prefixed' Full support 4 Prefixed' Prefixed' Implemented with the vendor prefix: -moz-	Opera Android Full support 14 Prefixed' Full support 14 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari iOS Full support 1 Prefixed' Full support 1 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 1 Prefixed' Prefixed' Implemented with the vendor prefix: -khtml-	Samsung Internet Android Full support 1.0 Prefixed' Full support 1.0 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-
Flow-relative values start and end	Chrome Full support 1	Edge Full support 79	Firefox Full support 1	IE No support No	Opera Full support 15	Safari Full support 3.1	WebView Android Full support 37	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 14	Safari iOS Full support 2	Samsung Internet Android Full support 1.0
justify-all	Chrome No support No	Edge No support No	Firefox No support No	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No
match-parent	Chrome Full support 16	Edge Full support 79	Firefox Full support 40	IE No support No	Opera Full support 15	Safari No support No	WebView Android Full support 37	Chrome Android Full support 18	Firefox Android Full support 40	Opera Android Full support 14	Safari iOS No support No	Samsung Internet Android Full support 1.0
Character-based alignment in a table column (<string> value) Experimental'	Chrome No support No	Edge No support No	Firefox No support No	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support  

Full support

No support  

No support

Experimental. Expect behavior to change in the future.'

Experimental. Expect behavior to change in the future.

Non-standard. Expect poor cross-browser support.'

Non-standard. Expect poor cross-browser support.

Deprecated. Not for use in new websites.'

Deprecated. Not for use in new websites.

Requires a vendor prefix or different name for use.'

Requires a vendor prefix or different name for use.

See also

• margin: auto, margin-left: auto, vertical-align

text-align by Mozilla Contributors is licensed under CC-BY-SA 2.5.