Be able to apply text alignment including left, right, centre, fully justified
Topic 14: Text Alignment 📚
1️⃣ Left Alignment (Default)
Left alignment is the most common style. Think of it as a line of people standing at the front of a classroom, all facing the same direction. The text starts from the left margin and flows to the right.
This is left aligned text. It starts at the left margin and ends wherever the line breaks.
2️⃣ Right Alignment
Right alignment is like a queue at the back of a line. The text starts from the right margin and moves leftwards. It’s often used for dates or addresses.
This is right aligned text. It starts at the right margin.
3️⃣ Center Alignment
Center alignment places the text in the middle of the line, like a spotlight on a stage. It’s great for titles or short statements.
This is center aligned text. It sits in the middle.
4️⃣ Fully Justified Alignment
Fully justified text stretches each line so that both the left and right edges align with the margins. It looks neat, like a tidy bookshelf. In HTML, use text-align: justify;.
This is fully justified text. It will stretch so that both the left and right edges line up with the margins, creating a clean block of text that looks like a well‑ordered bookshelf.
5️⃣ Quick Comparison Table
| Alignment | CSS Property | Typical Use |
|---|---|---|
| Left | text-align: left; | Paragraphs, body text |
| Right | text-align: right; | Dates, addresses |
| Center | text-align: center; | Headings, titles |
| Justified | text-align: justify; | Long paragraphs, articles |
📝 Examination Tips
- When asked to “apply text alignment”, always specify the CSS property and give a short example.
- Remember that
justifycan create uneven spacing; use it only when the text block is long enough. - Use emojis or symbols in your notes to remember which alignment is which: ↔️ for left, ↔️ for right, ↔️ for center, and ↔️↔️ for justified.
- Practice writing a paragraph and applying each alignment in a simple HTML file to see the visual difference.
- In the exam, you might be asked to explain the visual effect of each alignment on a page layout.
Revision
Log in to practice.
3 views
0 suggestions