CSS text-align property

Definition and Usage

The text-align property specifies the horizontal alignment of the text within an element.

This property sets the horizontal alignment of the text within a block-level element by specifying which point in the line box it aligns with. It supports the value 'justify' by allowing the user agent to adjust the spacing between letters and words in the line content, which may result in different outcomes across different user agents.

See Also:

CSS Tutorial:CSS Text

HTML DOM Reference Manual:textAlign Property

Example

Set the text alignment of h1, h2, h3 elements:

h1 {text-align:center;}
h2 {text-align:left;}
h3 {text-align:right;}

Try It Yourself

CSS Syntax

text-align: left|right|center|justify|initial|inherit;

Property value

Value Description
left Align the text to the left. Default value: determined by the browser.
right Align the text to the right.
center Align the text to the center.
justify To achieve the effect of justified text.
inherit Specifies that the text-align property value should be inherited from the parent element.

The value justify

The last horizontal alignment property is justify, which brings its own set of problems.

The value justify can align both ends of the text. In justified text, both ends of the text line are placed on the inner boundaries of the parent element. Then, adjust the spacing between words and letters to make the length of each line exactly equal. You may have noticed that justified text is very common in the printing field. However, in CSS, more considerations are needed.

It is determined by the user agent (not CSS) how justified text is stretched to fill the space between the left and right boundaries of the parent element. For example, some browsers may add extra space between words, while others may distribute the extra space between letters evenly (however, the CSS specification specifically points out that if letter-spacing propertySpecified as a length value, "user agents cannot increase or decrease the space between characters further"). Some user agents may also reduce the space of some lines, making the text more compact. All these methods will affect the appearance of the element, even changing its height, depending on how much text alignment choices of the user agent affect the number of text lines.

CSS also does not specify how to handle hyphens (note 1). Most justified text uses hyphens to split long words across two lines, thus reducing the space between words and improving the appearance of the text line. However, since CSS does not define hyphen behavior, user agents are unlikely to automatically insert hyphens. Therefore, justified text in CSS does not look as good as printed text, especially if the element is too narrow to fit only a few words per line. Of course, using narrow design elements is possible, but be aware of the corresponding drawbacks.

Note 1:CSS does not specify how to handle hyphens, as different languages have different hyphenation rules. The specification does not attempt to reconcile such potentially incomplete rules but simply does not address this issue.

Technical Details

Default Value: If the direction property is ltr, the default value is left; if direction is rtl, it is right.
Inheritance: yes
Version: CSS1
JavaScript Syntax: object.style.textAlign="right"

More Examples

Align Text
This example demonstrates how to align text.

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
1.0 3.0 1.0 1.0 3.5