CSS text alignment controls how inline content such as text is positioned horizontally inside an element. The main property used for this purpose is text-align.

The left value places text against the left side of its containing block.

p {
  text-align: left;
}

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

h2 {
  text-align: center;
}

The right value places text against the right side of its containing block.

p {
  text-align: right;
}

The justify value stretches lines so that text occupies the available width, creating an even left and right edge.

p {
  text-align: justify;
}

The text-align-last property specifies how the last line of a block-level element is aligned.

p {
  text-align: justify;
  text-align-last: center;
}

The direction property specifies the direction of text. It is commonly used with languages written from right to left.

.ltr {
  direction: ltr;
}

.rtl {
  direction: rtl;
}

The unicode-bidi property works with direction to control how bidirectional text is handled.

.example {
  direction: rtl;
  unicode-bidi: embed;
}

CSS media queries can change text alignment according to screen size. For example, a heading can be centered on mobile devices.

.heading {
  text-align: left;
}

@media (max-width: 600px) {
  .heading {
    text-align: center;
  }
}