text-align (CSS property)

Spec
Inherited Initial Version
Yes CSS1, 2
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Buggy Full Full Full Full

Syntax

text-align: { center | justify | left | right | inherit } ;

Description

This property specifies how the inline content of a block is aligned, when the sum of the widths of the inline boxes is less than the width of the line box.

Example

This style rule makes text in h1 headings centered:

h1 {
  text-align: center;
}

Value

The initial value is left if direction is ltr, and right if direction is rtl.

center
This value makes the text center justified.
justify
This value makes the text left and right justified. In this case, inline boxes may be stretched in addition to being repositioned. If white-space is pre or pre-line, the alignment is set to the initial value.
left
This value makes the text left justified.
right
This value makes the text right justified.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Buggy Buggy Buggy Buggy Full Full Full Full Full Full Full Full Full Full Full Full Full

Internet Explorer for Windows versions up to and including 7 incorrectly align block-level boxes according to the text-align property, although it should only affect inline boxes. The value justify behaves like center for table caption boxes.

Internet Explorer for Windows version 8 mis-positions the outline on inline elements when the parent element has the property/value text-align justify. The outline remains at the exact position had the value justify not been used and will therefore be misaligned with the element it refers to depending on how far the text has been moved when justified.

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.

User-contributed notes

ID:
#4
Contributed:
by Kevin Yank
Date:
Sun, 14 Feb 2010 23:38:29 GMT

Beginners unfamiliar with the CSS Box Model will often try to use text-align to align a block (like a div or a table) to the left, right, or center of the page. text-align is all about the position of the text inside block elements like these, though.

To center-align a block like a div or a table, you should set its left and right margins to auto (see the margin property in this reference for details).

To left- or right-align a block, either apply padding or a margin to its left or right side, or if you want it to sit alongside other blocks (if, for example, you are setting up a multi-column layout), you should float the block to the left or right (see Floating and Clearing in this reference).

Related Products