text-align

Specifies the horizontal alignment of the contents contained in block elements and table cells. Commonly used to align inline elements such as text and images left, right and center.

Initial Value start
Applies to Block container
Inheritance yes
Animation discrete

The text-align property is used to specify the alignment position and justification of lines within a block container.

A text block is a stack of single or multi-line line boxes. In the example below using text-align: end; the purple background is the text block, and the yellow border is the line box. 

Lorem ipsum dolor sit amet, consectetur~adipiscing~elit.

The text-align property sets how content is aligned along the inline axis when it does not completely fill each line box. In the example above, the text content does not completely fill the line box on the last line, so you can see that the text-align: end; specification aligns the content to the end of the line box.

The text-align property is a shorthand for specifying the values ​​of the text-align-all and text-align-last properties together. If the text-align property has a value other than justify-all, the text-align-last property value is set to auto.

Description

valuewhat it does
startAligns the characters to the beginning of the line box. (Initial value)
endAligns the characters to the end of the line box.
leftAligns the characters to the left edge of the line box.
rightAligns the characters to the right edge of the line box.
centerCenter the text in the line box.
justifyIt follows the specification of text-justify.
match-parentSame as specifying inherit. However, the start and end follow the parent element’s direction value.

Usage and Examples for text-align

Let’s look at the syntax used to write the text-align property values. And afterward, we’ll look at examples of various text-align alignments. You can use the resize knob to resize each example and see how it changes depending on the viewport size.

Syntax

/* keyword values */

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

/* character-based alignment in table columns */

text-align: "・";
text-align: "・" center;

/* global values */

text-align: inherit;
text-align: initial;
text-align: revert;
text-align: unset;

Examples

text-align: start;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget nibh elit. Nullam eros nunc, tristique tempor volutpat vel, accumsan nec nisl.

text-align: end;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget nibh elit. Nullam eros nunc, tristique tempor volutpat vel, accumsan nec nisl.

text-align: left;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget nibh elit. Nullam eros nunc, tristique tempor volutpat vel, accumsan nec nisl.

text-align: right;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget nibh elit. Nullam eros nunc, tristique tempor volutpat vel, accumsan nec nisl.

text-align: center;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget nibh elit. Nullam eros nunc, tristique tempor volutpat vel, accumsan nec nisl.

text-align: justify;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget nibh elit. Nullam eros nunc, tristique tempor volutpat vel, accumsan nec nisl.

text-align: justify-all;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget nibh elit. Nullam eros nunc, tristique tempor volutpat vel, accumsan nec nisl.

text-align: match-parent;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget nibh elit. Nullam eros nunc, tristique tempor volutpat vel, accumsan nec nisl.