Course Index

CSS · Module 17 · Lesson 19 of 48

Alignment & Line Height

What are Text Alignment & Line Height?

Imagine reading a newspaper. The columns have text aligned neatly to the left or right, and there is vertical space between the lines of text so your eyes can scan from one line to the next without getting confused.

In CSS, we format text flows using:

  • text-align: Controls horizontal text flow inside containers. Common settings are left (default), right, center, and justify (stretches text so lines have equal width).
  • line-height: Controls the vertical leading space between lines of text in a paragraph.

    • Why does it matter?

    Good line height is critical for readability. If lines are too close together, paragraphs look like solid black walls of text that tire the eyes. A line height multiplier of 1.5 to 1.8 creates beautiful, clean reading layouts.

    Syntax Breakdown

  • text-align: center; — Centers text horizontally.
  • line-height: 1.5; — Sets line spacing to 1.5 times the current font size. It is best to specify line-height as a unitless multiplier rather than pixels!

    • Common Mistakes

  • Centering large body paragraphs: While centering headings looks great, centering long paragraphs of body copy makes the left edge uneven, making it much harder for eyes to find the start of the next line. Keep long copy left-aligned!
  • Using static pixels for line-height: If you set font-size: 20px; and line-height: 15px;, the text lines will overlap and collide! Use unitless multipliers (like 1.5) instead.

    • Quick Reference

  • text-align — Centers, left-aligns, or right-aligns copy.
  • line-height — Vertical leading distance between lines.

    • Your Task
    Inside the `.centered-paragraph` class: 1. Set `text-align` to `center`. 2. Set `line-height` to `1.8`.
    index.html
    Type code above to start the lesson.
    Live Preview