Alignment: the 'text-align' property

Value: left | right | center | justify | | inherit
Initial: depends on user agent and writing direction
Applies to: block-level elements
Inherited: yes
Percentages: N/A
Media: visual

This property describes how inline content of a block is aligned. Values have the following meanings:

left, right, center, and justify
Left, right, center, and double justify text, respectively.
Specifies a string on which cells in a table column will align (see the section on horizontal alignment in a column for details and an example). This value applies only to table cells. If set on other elements, it will be treated as 'left' or 'right', depending on whether 'direction' is 'ltr', or 'rtl', respectively.

A block of text is a stack of line boxes. In the case of 'left', 'right' and 'center', this property specifies how the inline boxes within each line box align with respect to the line box's left and right sides; alignment is not with respect to the viewport. In the case of 'justify', the UA may stretch the inline boxes in addition to adjusting their positions. (See also 'letter-spacing' and 'word-spacing'.)


In this example, note that since 'text-align' is inherited, all block-level elements inside the DIV element with 'class=center' will have their inline content centered. { text-align: center }

Note. The actual justification algorithm used is user-agent and written language dependent.

Conforming user agents may interpret the value 'justify' as 'left' or 'right', depending on whether the element's default writing direction is left-to-right or right-to-left, respectively.