Tailwind CSS Course
Tailwind CSS
/
Beginner

Text Alignment

Definition

Utilities for controlling the alignment of text.

Explain Like I'm New

Controlling whether text sticks to the left, right, or center of its container.

Real World Example

Using `text-center` on a pricing page header, but leaving the actual pricing features as `text-left` so they are easy to read in a list.

Common Use Cases

  • •Headers
  • •RTL (Right-to-Left) languages
  • •Numerical tables

Interactive Example

Interview Questions

basic

  • What class centers text horizontally?

intermediate

  • If you apply `text-center` to a `<span class="inline">`, why doesn't the text actually center on the page?

Flash Cards

Question

Centers text?

Click to reveal answer
Answer

`text-center`

Question

Why span doesn't center?

Click to reveal answer
Answer

Because an `inline` element perfectly shrinks to the width of its text. There is no empty space *inside* the span for the text to move around in. Text alignment only works on block-level containers.