1. Computing

Discuss in my forum

text-align

By

text-align Description:

The text-align property defines the horizontal alignment of the text in the element. It affects text at a block level.

text-align in CSS Versions:

text-align Syntax:

text-align: left | right | center | justify | start | end | <string> | match-parent | inherit

  • left
    Align the text to the left side of the element.
  • right
    Align the text to the right side of the element.
  • center
    Align the text to the middle of the element.
  • justify
    Align the text so that the first and last characters are aligned with the left and right margins.
  • start (CSS3)
    Align the text so that it aligns on the side where the text starts, based on the text direction. In English, this is the same as left.
  • end (CSS3)
    Align the text so that it aligns on the side where the text ends, based on the text direction. In English, this is the same as right.
  • <string> (CSS3)
    A single character that is used in a table cell to align the cell contents to a character.
  • match-parent (CSS3)
    This acts the same as inherit except that it uses the direction of the current text, rather than the parent's direction to compute start and end values.
  • inherit
    The element should have the same text-align setting as the parent, including the direction of the text.

You write your text-align property like this:

text-align: justify;

In CSS3, you can use more than one keyword in your text-align property. In this case, the first keyword indicates the alignment of the first line of text and any line after a forced line break. The second value specifies the alignment of any remaining lines.

text-align: left right;

text-align Initial Value:

In CSS2.1 the initial value depends upon the direction of the text. If the text is ltr then the initial value is left. If the text is rtl then the initial value is right.

In CSS3 this value has been given a name: start.

text-align Applies To:

All block-level elements or elements that can contain blocks of text.

text-align Inheritance:

This property is inherited so any elements within the aligned element will share that alignment.

text-align Browser Support:

The standard alignments right, left, center, and justify have good browser support:

The newer features of CSS3 do not have as good of support.

  • start is supported by Firefox 1+, Chrome 3+, and Safari 3+.
  • end is supported by Firefox 3.6+, Chrome 3+, and Safari 3+.
  • <string> is not supported by any current browsers.
  • match-parent is not supported by any current browsers.
  • And using two keywords is not yet supported by any browsers.

Last tested: September 21, 2011.

text-align Examples:

The default alignment for English is left.

p { text-align: left; }

See an example of left alignment.

Right aligned text lines up on the right side of the box.

p { text-align: right; }

See an example of right alignment.

To align table cells on a character, you define that character as a string.

text-align: '.';

See an example of string alignment. Note that this is not currently supported in any browser.

Other text-align Examples

text-align Special Notes:

  • Justified text will change the spacing between letters or words, and user-agents handle this in different ways. Be sure to test your pages before you go live.

More text-align Information:

Related Video
How to Align Text in a CSS document
  1. About.com
  2. Computing
  3. Web Design / HTML
  4. Cascading Style Sheets
  5. Style Properties
  6. text-align CSS property

©2014 About.com. All rights reserved.