Can I center an image with text-align too?

A small image will shift over. Since img is treated as part of the same 'inline' family as text, setting text-align: center on the parent shifts the image inside to the center just like text.

Can I center vertically with text-align too?

No. What text-align aligns is only the left/right direction. Vertical centering is the job of other tools, like Flexbox's align-items.

How to center- or right-align text in CSS (text-align)

Text usually starts from the left. But a heading often looks better placed in the center, and a date or signature sits well aligned to the right. The one that controls this way of aligning text is text-align.

Let’s write it

h1 {
  text-align: center;
}

This makes the heading center-aligned. Swap the value and the direction it aligns to changes.

text-align: left; … align to the left (the usual)
text-align: center; … align to the center
text-align: right; … align to the right

Headings center, side notes and dates right — using them by role like this gives your page a settled feel.

Lining up the three values makes the difference in where the text sits clear.

All three boxes are the same width. What’s moving is only the position of the text inside the box.

One more value: justify

Besides left, center, and right, there’s also a value called justify. It aligns both ends of each line — the kind of setting you often see in newspapers and books.

p {
  text-align: justify;
}

In exchange for the right edge of the lines lining up perfectly, the gaps between characters stretch and shrink slightly from line to line. When the look bothers you, choosing not to force it and leaving it as left is a fine choice too.

Lining up the same text as ordinary left-aligned and as justify reveals the difference in how the right edges line up.

The top is ordinary left-aligned, the bottom is justify. You can see the bottom box has its right edge lined up perfectly.

Only “the text inside” aligns

What text-align moves is, after all, the text inside the box. It doesn’t carry the box itself to the center of the screen.

.box {
  width: 300px;
  text-align: center; /* only the text inside goes to the center */
}
.box-centered {
  width: 300px;
  margin: 0 auto; /* the box itself goes to the center */
}

With .box, the box’s position stays put and only the text inside shifts to the center. When you want to carry the whole box to the center of the screen, that’s the job of margin: 0 auto;, not text-align. “Where within the box do I align the text” — don’t mix this up.

Summary of this lesson

How text is aligned is text-align
Choose from the four: left, center, right, justify
What aligns is the text inside the box (not the box itself)

Align text to the center or right

Let’s write it

One more value: justify

Summary of this lesson

Try it: center the contents of Contact

FAQ