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
leftifdirectionisltr,rightifdirectionisrtl - Applies To: block containers
- Animatable: no
Values
- start
-
The same as
leftif direction is left-to-right andrightif direction is right-to-left. - end
-
The same as
rightif direction is left-to-right andleftif 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-justifyproperty.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 inheritedstartorendkeyword is interpreted against its parent’sdirectionvalue and results in a computed value of eitherleftorright. - Start end (experimental, not supported)
-
Specifies
startalignment of the first line and any line immediately after a forced line break; andendalignment 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 PlaygroundBrowser 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.