| Inherited | Initial | Version |
|---|---|---|
| Yes | CSS1, 2 |
| IE5.5+ | FF1+ | SA1.3+ | OP9.2+ | CH2+ |
|---|---|---|---|---|
| Buggy | Full | Full | Full | Full |
Syntax
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-spaceispreorpre-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
- 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).
