Aligning Text with CSS `text-align`: Left, Right, Center, and Justify

Master text alignment in CSS using the `text-align` property. This tutorial explains how to align text to the left, right, center, and justify, providing clear examples and demonstrating how to create well-organized and visually appealing layouts. Improve your CSS layout skills.

Aligning Text with CSS `text-align`

Understanding `text-align`

The CSS `text-align` property controls the horizontal alignment of text within an element. It affects how inline-level content (like text) is positioned within its block-level container (e.g., a paragraph, div, etc.). It's a fundamental property for creating well-organized and visually appealing layouts.

`text-align` Property Values

The `text-align` property accepts these values:

  • left: Aligns text to the left.
  • right: Aligns text to the right.
  • center: Centers text within the container.
  • justify: Justifies text (stretches lines to equal width, often used in newspapers and magazines).
  • initial: Resets to the default value (typically `left` for left-to-right text).
  • inherit: Inherits the value from its parent element.

Example: Demonstrating Text Alignment

This example demonstrates different text alignment values. You would need to include the corresponding HTML elements (e.g., paragraphs of text) to see the effects. The `text-align` property is applied directly to the element containing the text.

Example CSS

p:nth-child(1) { text-align: left; }
p:nth-child(2) { text-align: right; }
p:nth-child(3) { text-align: center; }
p:nth-child(4) { text-align: justify; }

Note that the effect of `justify` is more apparent with longer paragraphs of text.