CSS Text Alignment

The CSS text-align property controls the horizontal alignment of inline content within a block container.

Text can be aligned to the left or right, centered, justified, or aligned according to the writing direction. The property affects inline content inside an element rather than positioning the element itself.

text-align Syntax

The text-align property is applied to a block container and controls the horizontal alignment of its inline content.

p {
  text-align: center;
}

This rule centers the inline content inside matching <p> elements.

Left and Right Alignment

The left and right values align inline content with the corresponding physical side of its containing block.

.left {
  text-align: left;
}
.right {
  text-align: right;
}

These values always refer to the physical left and right sides, regardless of the writing direction of the text.

Center Alignment

The center value places the inline content in the horizontal center of its containing block.

h2 {
  text-align: center;
}

Center alignment is commonly used for headings and other short content. Centering long paragraphs can make them more difficult to read because each line begins at a different horizontal position.

Justified Text

The justify value adjusts spacing so that lines of text generally fill the available inline width, creating aligned edges on both sides.

p {
  text-align: justify;
}

The last line is normally handled differently and is not stretched across the full width. Justified text can create uneven spaces between words, particularly in narrow containers, so readability should be considered when using it.

Start and End Alignment

The start and end values align content according to the writing direction rather than a fixed physical side.

.start {
  text-align: start;
}
.end {
  text-align: end;
}

For left-to-right text, start normally aligns text to the left and end aligns it to the right. For right-to-left text, those directions are reversed. This makes start and end useful for layouts that support different writing directions.

Text Alignment and Elements

The name text-align can be misleading because the property is not limited to text. It aligns inline-level content within a block container, which can include text, links, images, and inline or inline-block elements.

.container {
  text-align: center;
}

If an image is inline content inside this container, it can also be centered by text-align: center. The property does not center the block container itself.

Inheriting text-align

The text-align property is inherited. Descendant content normally uses the computed alignment of its parent unless another CSS rule specifies a different value.

article {
  text-align: center;
}

Text and other inline content inside the <article> will normally inherit the centered alignment. A descendant can override the inherited alignment by declaring another text-align value.

text-align Example

The following example uses the text-align property to center a paragraph. Open the example in the editor and change center to left, right, justify, start, or end, then run the code to compare the different alignments.

p {
  text-align: center;
}

Play in Editor