Don’t Ever Center-Align Paragraphs… PLEASE

If you want people to actually read your content, don’t center-align paragraphs. Centered body text looks “balanced,” but it’s harder to read.

This is wrong, IMHO:

This is better:

See? Much easier to read!

Here’s a graphic showing this as well:

The fix is simple: center the container, keep the text left-aligned, and give the column a reasonable width. That’s how books, newspapers, and good websites do it. I’ll go over how to do that in this article.

Why Center-Aligned Paragraphs Hurt Readability

• No consistent starting point: With centered text, each line begins in a different spot. Your eyes have to hunt for the start of the next line.
• Worse scanning: People skim. A ragged left edge slows them down.
• More fatigue on wide screens: Long lines across a desktop monitor feel like a wall of text.

The Right Pattern: Centered Container, Left-Aligned Text

Here’s how to keep the layout visually centered, but let the paragraph text anchor to the left inside that centered column. Basically, you don’t want readers to have to read text across the whole web page, so put it inside a container of a smaller width. This is much like newspaper columns.

Here’s the CSS to use – put it in between the <style></style> tags on your page:

/* Reusable reading column */
.text-block {
  max-width: 70%;      /* or try 48rem–60rem, or 800px */
  margin: 0 auto;      /* centers the container */
  text-align: left;    /* keeps paragraphs left-aligned */
}

Drop your content inside a <div class="text-block">...</div> and you’re set – like this:

<div class="text-block">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

If you prefer character-based comfort, aim for about 60–75 characters per line—adjust max-width until it feels right with your font.

Practical Variations

• Percentage-based (fluid): max-width: 70% keeps things responsive and never edge-to-edge.
• Fixed with a ceiling: max-width: 800px gives a “magazine” feel on desktops and stays comfy on ultra-wide screens.
• Clamp it: Combine both:
  
  Copy

  .text-block { width: min(70%, 60rem); margin: 0 auto; text-align: left; }

When (and When Not) to Center

Here are some easy rules to follow about center-aligning text:

• Center small stuff—short headlines, buttons, or a one-line callout.
• Don’t center long paragraphs, lists, or anything that runs more than a couple of lines.

A Copy-Paste Example You Can Steal:

<div class="text-block">
  <h2>A Readable Section</h2>
  <p>This paragraph is left-aligned inside a centered container. 
     It won’t stretch across the whole page, so it’s easier to read on large screens.</p>
</div>

FAQs About Center- vs Left-Aligned Paragraphs

Why shouldn’t you center-align paragraph text?

Because each line starts in a different place, which makes your eyes work harder to find the next line. It slows reading and increases fatigue.

What’s the best width for paragraphs on a website?

A common guideline is about 60–75 characters per line. Practically, that often means a max-width around 48–60rem (or ~700–900px), depending on your font and size.

Should I use a fixed pixel width or a percentage?

Either works. A fixed max-width (e.g., 800px) is very consistent. A percentage (e.g., 70%) stays fluid. You can combine them with width: min(70%, 60rem); for the best of both.

Is it OK to center headlines?

Short headlines and callouts can be centered. If the line wraps or runs long, left-align it.

How do I center the box but keep the text left?

Use margin: 0 auto; on the container and text-align: left; for the text, like this:

.text-block { max-width: 70%; margin: 0 auto; text-align: left; }

📄 Download a PDF of This Article