CSS Reference Property

text-align

The text-align property describes how inline-level content (like text or images) inside a block level element is aligned.

Even though the property says “text” align, it affects all elements inside the block-level element that are either inline or inline-block elements.

The property only affects the content inside the element to which it is applied, and not the element itself. To center the element itself, the margin property can be used.

The values of the text-align property align the content of an element with respect to the element itself, not the viewport.

The text-align property cascades, so block-level children elements of the element to which the property is applied will also have their inline-level elements aligned the same way as their containing element.

Trivia & Notes

If you’re new to CSS and have a familiarity with WYSIWYG editors then it might help to know that the values of the text-align: left, center, right, and justify are equivalent to the effects applied by the text align buttons in the editor: usually found in the paragraph formatting section. The default is usually the left alignment in left-to-right languages, and the right alignment in right-to-left languages (such as Arabic).

Official Syntax

Syntax:

text-align: start | end | left | right | center | justify | match-parent | start end

Initial: a nameless value that acts as left if direction is ltr, right if direction is rtl
Applies To: block containers
Animatable: no

Values

start

The same as left if direction is left-to-right and right if direction is right-to-left.

end

The same as right if direction is left-to-right and left if direction is right-to-left.

left

Inline-level content is aligned to the left edge of the line box.

right

Inline-level content is aligned to the right edge of the line box.

center

The inline contents are centered (horizontally) within the line box.

justify

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

The browser adjusts the spacing between words so that the inline content exactly fills the entire line from the left edge of the element to its right edge.

It usually takes the remaining space between the ends of a line’s contents and the edges of its container, and distributes that space throughout its contents so that the contents exactly fill the line box.

inherit

The element inherits the same alignment specified on its parent.

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 (experimental, not supported)

Specifies start alignment of the first line and any line immediately after a forced line break; and end alignment of any remaining lines.

<string> (experimental, not supported)

Instead of aligning inline content to the edges of the element, it is aligned with respect to the one-char string specified. The string is used in combination with another value specified right after it (such as start). The value specified after the one-char string specifies the alignment of content with respect to that string. For example, numeric content could be aligned with respect to the decimal point.

Examples

The following example centers all inline level elements inside divs that have a class of important. Any block level child elements of these divs (including inline-block elements) will also have their content centered, so you may need to reset the alignment in those.

div.important { 
    text-align: center; 
}

Live Demo

View this demo on the Codrops Playground

Browser Support

The property works in Chrome, Firefox, Safari, Opera, IE3+, Android and iOS.

The values start and end are not supported in Opera and IE.