✏️ CSS text-align — Controlling Horizontal Alignment of Text

The text-align property in CSS controls the horizontal alignment of inline content, such as text, within a block-level element. It’s simple yet powerful — and one of the most commonly used styling tools in web design.

---

🔹 What Does text-align Do?

It determines how text and inline elements are aligned inside their container — left, right, center, or justified.

---

📘 Syntax

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

---

💡 Common Values

Value	Description
left	Aligns text to the left (default in LTR languages)
right	Aligns text to the right
center	Centers the text inside the element
justify	Spreads text across the full width, adjusting space between words
start	Aligns to the start of the reading direction (left in LTR, right in RTL)
end	Aligns to the end of the reading direction

---

✍️ Example: Centering a Paragraph

<p class="center-text">This text is centered using CSS.</p>

.center-text {
  text-align: center;
}

---

🖼️ Image Idea: Visual Representation of text-align Values

Image Description:
A box showing a single line of text aligned:

• To the left
• To the right
• In the center
• With justified spacing

🎯 Purpose: Show how the alignment shifts inside the same width container.

---

🧠 Notes & Tips

• text-align affects inline content only, such as:
  • Text
  • Inline images
  • Inline-block elements
• It doesn’t move the block itself — only the content inside it.

---

✅ When to Use

Use Case	Suggested text-align
Paragraphs of readable content	justify or left
Headlines or quotes	center
Navigation or sidebar widgets	right or center
RTL languages (Arabic, Hebrew)	start or end

---

🔄 Interaction with Direction

html {
  direction: rtl;
}

p {
  text-align: start;
}

• In RTL (right-to-left) languages, start aligns to the right.
• end aligns to the left in RTL.

---

✨ Bonus: Centering Inline Elements

To center an inline element like a <span> or image inside a block:

.centered-block {
  text-align: center;
}

Then:

<div class="centered-block">
  <img src="image.png" alt="Centered image">
</div>

---

✅ Summary

Property	text-align
Applies to	Inline content inside a block
Controls	Horizontal alignment of content
Useful for	Text, images, navs, buttons
Keywords	left, right, center, justify, start, end

---

🔚 Final Thought

The text-align property is deceptively simple — but it’s crucial for creating visually balanced, readable contentacross languages and layouts. Mastering it brings clarity and professionalism to your designs.

---