Today, we’ll look at a common yet very flawed design strategy employed by beginning webdesigners–center-aligning EVERYTHING on the page. Why do I call it “very flawed?” Read on to find out!

What’s So Bad About Center-Aligning Text?

If you’re just coming into webdesign from working with text documents or word-processing programs, it can be very tempting to center-align everything on your page. After all, the center of the page is where everyone’s going to look first on a webpage, right?

Unfortunately, webpages render center alignment very differently than regular text documents, as I’ll demonstrate below.

Center Aligning in Word Processing Documents

It’s true that center aligning can make narrower blocks of text look tidy and professional in word processing programs. See the examples below:

Left Aligned Text in a Word Processing Document

Center Aligned Text in a Word Processing Document

Center alignment, in this circumstance, makes the text look neater and more presentable.

Center Aligning in Web Documents

Unfortunately, this does not translate to the Web at all, unless you have designed narrow columns for text to flow in (more like a newspaper format). Invariably, if you center-align text in a very wide divided layer (more than 800 pixels wide) this is what it ends up looking like:

(click picture to see it full-size in new window)

Center-aligned content, when stretched across large widths of layout space, has uneven line ends on both sides of the paragraph, so it looks sloppy and unprofessional on the page. Additionally, sentences are much harder to follow because the reader doesn’t know exactly where the next line will begin and has to spend a couple of extra seconds visually searching for the first word on the next line.

This might seem nitpicky, but it has a tremendous impact on our readers’ experience of our sites. If our sites are too hard to read and follow, they’ll leave and find another site with the same information but better formatting. We don’t want that!

What Are Some Text-Formatting Alternatives?

If you really like the look of center-aligning text, you might consider putting your text in much narrower divided layers (only about 300-400 pixels wide), and having several columns of text. Be warned, however, that this can make your page super-long if you’ve got a lot of text, and these days, we don’t want our users having to scroll a lot to find the information they want.

Alternatively, you can choose to make your content div about 500-600 pixels wide, and only center-align your titles or headings. This is the look I go with most often on my personal sites or fansites, and I find it gives the tidy look I want without having to center-align EVERYTHING.

Also, you can try center-aligning your navigation in a horizontal “bar” above your content, especially if you’ve got only a few links in your navigation. This can draw user attention better than letting it be left-aligned and lost in the visual shuffle.

Summary

Center-aligning can be a very tempting text-formatting strategy, but it’s best used sparingly–otherwise, our pages will be very difficult to read and enjoy. Using center alignment carefully is one of the ways you can make your site look more professional!