CSS text-align

<!doctype html>
<title>Example</title>
<style>
div {
 padding: 0 2vw;
 border: 2vw solid gold;
 font-size: 4vw;
 text-align: center;
}
</style>
<div>
  <h1>Tortor at risus</h1>
  <p>Auctor augue mauris augue neque gravida in fermentum. Euismod elementum nisi quis eleifend. Nec ultrices dui sapien.</p>
</div>

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

CSS Text Module Level 3 (W3C Last Call Working Draft 10 October 2013)
CSS Level 2.1 (W3C Recommendation 07 June 2011)
CSS Level 1 (W3C Recommendation 17 Dec 1996)