CSS text-align

Editor Preview

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

The text-align property has a lot of history within the CSS specifications. Its definition has changed a lot since its introduction in the first CSS specification document in 1996.

In its most recent definition (as of August 2020), the text-align property is defined as a shorthand property that "sets the text-align-all and text-align-last properties and describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill the line box. Values other than justify-all or match-parent are assigned to text-align-all and reset text-align-last to auto."

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.
justify-all
Sets both text-align-all and text-align-last to justify, forcing the last line to justify as well.

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
Animatable
Discrete (see example)

Example Code

Official Specifications