Text Alignment

In the last lesson you learned about Line Height. That controls the space between lines of text. Now let’s look at where the text sits from left to right. That is text alignment.

🎯 What is Text Alignment?

When you write text on a page, it has to start somewhere. By default it starts on the left side. But sometimes you want it in the middle. Or pushed to the right. Or spread out to fill the whole line. That is what alignment lets you control.

text-align is the CSS property that decides where the text sits inside its box, from left to right.

Think of a notebook page. You can write your words starting from the left margin. Or you can write a title right in the centre of the page. Same words, different position. text-align is you choosing that position.

🤔 Why Do We Need It?

Here is the real problem. Say you make a heading for your website like “Welcome to My Shop”. By default it sticks to the left. But a heading often looks nicer in the middle. Without alignment you would have no clean way to move it there.

So text-align helps you in everyday cases like these.

• A page title or heading that looks better in the centre.
• A price or a date that you want pushed to the right side of a box.
• A long paragraph where you want both edges to line up neatly, like in a newspaper.

🧩 The Syntax and the Main Values

The property is simple. You write text-align and then the value you want.

Here is the basic shape of it.

selector {
  text-align: center;
}

There are a few values you will use most of the time. This code shows them all together so you can compare them.

p {
  text-align: left;    /* text starts from the left (this is the default) */
  text-align: right;   /* text moves to the right side */
  text-align: center;  /* text sits in the middle */
  text-align: justify; /* text stretches to touch both edges */
}

A quick note. You would not write all four on the same element like above. That is just to show them together. In real code you pick one.

• left keeps text on the left. Most text in English-style pages starts here anyway.
• right pushes text to the right edge. Good for things like a date in a corner.
• center puts text in the middle. Great for titles.
• justify spreads the words so each line touches both the left and the right edge.

📝 A Simple Example

Let’s make three headings, each aligned a different way. First the HTML.

<h2 class="left-title">On the Left</h2>
<h2 class="center-title">In the Middle</h2>
<h2 class="right-title">On the Right</h2>

Now the CSS that aligns each one.

.left-title {
  text-align: left;
}
.center-title {
  text-align: center;
}
.right-title {
  text-align: right;
}

🛒 A Real Example

Say you are building a product card for an online shop like Amazon. You want the product name in the centre. You want the price pushed to the right. Here is the HTML.

<div class="card">
  <h3 class="name">Wireless Headphones</h3>
  <p class="price">$49</p>
</div>

Now the CSS to align the two parts.

.card {
  width: 250px;
  border: 1px solid #ccc;
  padding: 16px;
}
.name {
  text-align: center;
}
.price {
  text-align: right;
}

This is a normal pattern you will use again and again. The name in the centre feels balanced. The price on the right is easy for the eye to find.

⚠️ Common Mistakes

A few things trip up beginners. Watch out for these.

• Trying to centre a box with text-align. text-align: center; only moves the text and inline things inside an element. It does not move the box itself. To centre a whole box you use margin: 0 auto; instead. That is a different tool.
• Using justify on short lines. Justify looks nice on long paragraphs. But on short text it can leave big ugly gaps between the words. So save it for real paragraphs.
• Forgetting it passes down to children. text-align is inherited. So if you set it on a parent, the text in the children follows it too, unless you change it. This is handy. But it can surprise you.

✅ Best Practices

Keep these simple habits in mind.

• Use center for titles and short headings, not for long paragraphs. Long centred paragraphs are hard to read because every line starts in a different place.
• Keep most body text as left. It is the easiest for people to read.
• Use right for small bits like dates, prices, or numbers in a table.
• Only use justify for wide blocks of text. And check that it does not create big gaps between the words.

🧩 What You’ve Learned

Here is a quick recap of what we covered.

• ✅ text-align controls where text sits from left to right inside its box.
• ✅ The main values are left, right, center, and justify.
• ✅ center is perfect for titles, and right is great for prices or dates.
• ✅ justify makes both edges line up, but only use it on long paragraphs.
• ✅ text-align moves the text, not the box itself, and it is inherited by children.

🚀 What’s Next?

Now you can place text wherever you want from left to right. Next you will learn how to add lines under, over, or through your text.

Text Decoration