ICT 0417 - Topic 14 Styles - Text Alignment

Objective

Be able to apply text alignment including left, right, centre, fully justified.

Introduction

Text alignment refers to the positioning of text within an element's container. It's a fundamental aspect of creating visually appealing and readable documents. Proper alignment enhances readability and professionalism.

Text Alignment Options

There are four primary text alignment options:

• Left Alignment: Text is aligned to the left margin of the container. This is the most common alignment.
• Right Alignment: Text is aligned to the right margin of the container.
• Centre Alignment: Text is horizontally centered within the container.
• Fully Justified: Text is aligned to both the left and right margins, stretching the space between words to create uniform block margins.

Applying Text Alignment in HTML

Text alignment is controlled using the CSS property text-align.

Here's how to apply each alignment type:

<p style="text-align: left;">This text is left aligned.

<p style="text-align: right;">This text is right aligned.

<p style="text-align: center;">This text is centered.

<p style="text-align: justify;">This text is fully justified.  The space between words is adjusted to create even block margins.

Example demonstrating different alignments

The following HTML code demonstrates the different text alignment options:

<div style="width: 400px; border: 1px solid black;">
  <h3>Text Alignment Examples
  <p style="text-align: left;">This paragraph is left aligned.

  <p style="text-align: right;">This paragraph is right aligned.

  <p style="text-align: center;">This paragraph is centered.

  <p style="text-align: justify;">This paragraph is fully justified.  Notice how the spacing between words is adjusted.