CSS Tutorial: text-align 🧭✨

Introduction to text-align in CSS 📝

The text-align property controls the horizontal alignment of inline content (like text) inside a block-level element. It’s one of the simplest yet most frequently used CSS properties — perfect for headings, paragraphs, navigation items, and more! 🎯

Why Use text-align? 🤔

  • To center headings or banners 🎯
  • To align paragraphs for better readability 📖
  • To right-align numbers or UI text 🔢
  • To create flexible and elegant layouts ✨

Syntax 📌

Basic Syntax

selector {
  text-align: left | right | center | justify | start | end;
}

Note

Note: text-align affects inline-level content inside a block container.

Available Values 🧩

1. left (Default in LTR languages) ⬅️

Aligns text to the left edge.

2. right ➡️

Aligns text to the right edge. Useful for UI labels or numbers.

3. center 🎯

Centers the inline content inside the container.

4. justify 📚

Stretches each line so text touches both left and right sides — commonly used in books and newspapers.

5. start ↖️

Aligns text according to writing direction: left for LTR, right for RTL.

6. end ↗️

Opposite of start, aligns text based on writing direction.

Examples 🔥

1. Basic Alignment

Left, Right, Center

h1 {
  text-align: center;
}

p {
  text-align: left;
}

.price {
  text-align: right;
}

2. Justified Paragraph

Justified text

.article {
  text-align: justify;
}

3. Direction-aware Alignment 🌍

Start & End

.dynamic {
  text-align: start;
}

Comparison Table 📚

ValueDescription
leftAligns text to the left
rightAligns text to the right
centerCenters text
justifyStretches text to fill width
startAligns based on writing mode (LTR/RTL)
endOpposite of start

Visual Example 🖼️

Here’s a visual placeholder showing different text alignments:

Further details can be found at: https://dummyimage.com/800x250/eeeeee/000000&text=Left+|+Center+|+Right+|+Justify

>>“Alignment is the silent force that shapes readability and visual harmony.” ✨

Conclusion 🎉

The text-align property is a simple yet powerful tool for controlling text alignment in CSS. Whether you’re crafting clean UI layouts or designing readable article content, mastering text alignment will elevate your typography and design skills. Start experimenting with it — especially center and justify — to bring balance and beauty to your layouts! 🚀