Text alignment is used to determine how text is positioned within an element. By setting text alignment, you can choose whether the text appears to the left, right, center, or is justified within the element. This property helps improve the readability and overall layout of your content.

Controlling text alignment is essential for creating balanced designs that guide the reader's eye and improve the visual structure of your page.

Syntax

Follow the code block below to set text alignment in CSS:

text-align: left | right | center | justify;

Explanation:

• left: Aligns text to the left side of the element.
• right: Aligns text to the right side of the element.
• center: Centers the text horizontally.
• justify: Stretches the text so that each line has equal width, creating a neat block of text.

Example 1: Center Aligned Heading and Paragraph

In this example, we align the text to the center for a heading and a paragraph. This creates a balanced appearance for elements that should stand out.

Explanation:

• Text Alignment:
  • The .center-text class uses text-align: center to center the text.
• Outcome:
  • Both the heading and paragraph appear centered in the browser.

Example 2: Justified Text in a Paragraph

In this example, we use text-align: justify to align the text evenly on both sides. This is often used in articles and reports to create a neat block of text.

Explanation:

• Text Alignment:
  • The .justify-text class applies text-align: justify to the paragraph.
• Outcome:
  • The text in the paragraph aligns evenly along both the left and right margins, creating a visually uniform block of text.

This lesson illustrates how to use the text-align property to control the horizontal alignment of text. By centering or justifying text, you can create layouts that improve the readability and aesthetic balance of your content.