Text Alignment

CSS Text Alignment

The CSS text-align property controls the horizontal alignment of inline content within an element. Text can be aligned to the left or right, centered, justified, or aligned according to the writing direction of the document.

The text-align Property

The CSS text-align property specifies how inline content is horizontally aligned within a block container. It is commonly used to align text inside headings, paragraphs, sections, and other block-level elements.

p {
  text-align: center;
}

This rule centers the inline content inside each paragraph.

Left Alignment

The left value aligns inline content with the left edge of the element's content area.

p {
  text-align: left;
}

Left alignment is commonly used for languages written from left to right.

Right Alignment

The right value aligns inline content with the right edge of the element's content area.

p {
  text-align: right;
}

Center Alignment

The center value positions inline content horizontally between the left and right edges of its containing element.

h2 {
  text-align: center;
}

Center alignment is often useful for headings and other short pieces of content, but long centered paragraphs can be more difficult to read.

Justified Text

The justify value adjusts spacing so that lines of text generally extend to both edges of the containing element. The final line is normally aligned according to the text direction rather than stretched across the full width.

p {
  text-align: justify;
}

Justification can produce uneven spaces between words, especially in narrow columns, so check the result carefully when using it for body text.

Start and End Alignment

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

.start {
  text-align: start;
}

.end {
  text-align: end;
}

For left-to-right text, start normally corresponds to the left side and end to the right side. For right-to-left text, those positions are reversed.

These logical values are useful when a page may contain languages with different writing directions.

Try Different Text Alignments

Edit the text-align values in the example to compare left, center, right, and justified text.

Text Alignment and Inheritance

The text-align property is inherited. When alignment is applied to a parent element, its descendants generally inherit that alignment unless another CSS rule changes it.

section {
  text-align: center;
}

section p {
  text-align: left;
}

Inline content inside the section is centered by default, while the paragraphs are left aligned because they have their own text-align declaration.

What text-align Aligns

The text-align property aligns inline content inside an element. It does not move the block element itself to the left, center, or right of its parent.

div {
  text-align: center;
}

This centers inline content inside the <div>, such as text and inline elements. It does not center the <div> itself.

This distinction is important because positioning or centering block elements is handled with other CSS layout techniques.

Choosing Text Alignment

For ordinary paragraphs, alignment that follows the natural reading direction is usually easiest to read. Centered and right-aligned text can work well for short content, headings, labels, or particular design elements.

Use justified text carefully because the browser may create noticeable gaps between words, particularly when the available line width is small.

Summary

The CSS text-align property controls the horizontal alignment of inline content within an element. Common values include left, right, center, and justify, while start and end adapt to the writing direction of the content.

The next tutorial covers Text Decoration and how CSS adds or removes decorative lines such as underlines and line-throughs.