Text

text-align

text-align sets which side the text in each line leans toward. It can also center or justify the text.

Syntax

start | end | left | right | center | justify | match-parent

Preview

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

Presets

Drag the bottom-right corner to resize

Code

.box {
  text-align: center;
}

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

About

Writing the value

start / end: the side where the writing direction starts or ends. For English, start is the left; for right-to-left text such as Arabic, it is the right. The initial value is start.
left / right: left or right regardless of direction.
center: centered.
justify: stretches every line except the last to both edges. English is adjusted between words, Japanese between characters. Use text-align-last to change how the last line is aligned.
match-parent: the same alignment as the parent. Unlike inherit, start and end are turned into left or right using the parent's direction.

Only the content moves

text-align moves the text, images and inline-block elements inside the element. The element itself stays where it is. To center a block element, use margin-inline: auto or flexbox.

Children inherit it

text-align is inherited. Centering a card's heading through its container can center the body text inside it too.

References

MDN Web Docstext-align SpecificationCSS Text Module Level 3 Can I usetext-align