CSS text-align

The CSS text-align property is used for aligning elements left, right, center etc.

Although the property name is text-align, it applies to all inline content of a block container. Therefore, it's not just limited to aligning text — it's for aligning any inline-level content within a block level element (as long as it doesn't completely fill the block container).

It's important to note that any alignment specified with text-align is not with respect to the viewport or containing block. A block of text is a stack of line boxes. The text-align property specifies how the inline-level boxes within each line box align with respect to the start and end sides of the line box.

Syntax

Possible Values

start
Specifies that inline-level content is aligned to the start edge of the line box.
end
Specifies that inline-level content is aligned to the end edge of the line box.
left
Specifies that inline-level content is aligned to the line left edge of the line box. (In vertical writing modes, this will be either the physical top or bottom, depending on the value of the text-orientation property.)
right
Specifies that inline-level content is aligned to the line right edge of the line box. (In vertical writing modes, this will be either the physical top or bottom, depending on the value of the text-orientation property.)
center
Specifies that inline-level content is centered within the line box.
justify
Specifies that text is justified according to the method specified by the text-justify property, in order to exactly fill the line box.
match-parent
This value behaves the same as inherit (computes to its parent's computed value) except that an inherited start or end keyword is interpreted against its parent's direction value and results in a computed value of either left or right.
start end
Specifies start alignment of the first line and any line immediately after a forced line break; and end alignment of any remaining lines.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial
Represents the value specified as the property's initial value.
inherit
Represents the computed value of the property on the element's parent.
unset
This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value

CSS2: A nameless value that acts as left if direction is ltr, right if direction is rtl.

CSS 2.1: auto

CSS3 (Working Draft): start

Applies To
Block containers
Inherited?
Yes
Media
Visual

Example Code

Official Specifications