CSS property: text-align

Description

This property describes how inline contents of a block are horizontally aligned if the contents do not completely fill the line box.

If two keywords are given in combination, then the first value specifies the alignment of the first line and any line immediately after a forced line break; and the second value specifies the alignment of any remaining lines.

A block of text is a stack of line boxes. In the case of start, end, left, right and center, this property specifies how the inline-level boxes within each line box align with respect to the start and end sides of the line box: alignment is not with respect to the viewport or containing block.

In the case of justify, the UA may stretch or shrink any inline boxes by adjusting their text in addition to shifting their positions. (See also text-justify, letter-spacing, and word-spacing.) If an element's white space is set to be collapsible, then the UA is not required to adjust its text for the purpose of justification and may instead treat the text as having no expansion opportunities. If the UA chooses to adjust the text, then it must ensure that tab stops continue to line up as required by the white space processing rules.

Syntax

text-align: [ start | <string> ]? [ start | end | left | right | center | justify | match-parent ];

Values

start (by default)

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

end

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

left

The inline contents are aligned to the left edge of the line box. In vertical text, left aligns to the edge of the line box that would be the start edge for left-to-right text.

right

The inline contents are aligned to the right edge of the line box. In vertical text, right aligns to the edge of the line box that would be the end edge for left-to-right text.

center

The inline contents are centered within the line box.

justify

The text is justified according to the method specified by the text-justify property.

<string>

The string must be a single character; otherwise the declaration must be ignored. When applied to a table cell, specifies the alignment character around which the cell's contents will align.

match-parent

This value behaves the same as inherit except that an inherited start or end keyword is calculated against its parent's direction value and results in a computed value of either left or right.

Versions

Examples

p {
    text-align: justify;
}
td {
    text-align: "." center;
}