text-align property is used for aligning elements left, right, center etc.
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-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
match-parent are assigned to
text-align-all and reset
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.
- Specifies that inline-level content is aligned to the start edge of the line box.
- Specifies that inline-level content is aligned to the end edge of the line box.
- 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
- 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
- Specifies that inline-level content is centered within the line box.
- Specifies that text is justified according to the method specified by the
text-justifyproperty, in order to exactly fill the line box.
- This value behaves the same as
inherit(computes to its parent's computed value) except that an inherited
endkeyword is interpreted against its parent's
directionvalue and results in a computed value of either
- Sets both
text-align-lastto 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:
- Represents the value specified as the property's initial value.
- Represents the computed value of the property on the element's parent.
- This value acts as either
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.