Web Tutorials: Centering

Like most things in programming, when it comes to centering items, there are a number of ways to align your text, images or blocks.

Also like most things with HTML and CSS someone came up with a simple way to achieve centered items and someone else decided they didn't like that idea.

The CENTER Tag

Surrounding your code with the <CENTER> </CENTER> tags would seem the perfect solution to centering and aligning text. It was included in the standard, some say because so many web designers were/are making use of it, but is now on the depricated list. Due to the somewhat disfavor this tag has garnered, it is not entirely reliable. I mention it here only to be complete and would recommend trying this technique only once all the others have failed as it may stop working as the W3C standards change in the future.

Alignment Problems

Yep, you read that right. Not all of the options provided work in all situations. The purists and "experts" will chide me for saying that but reality is that sometimes depending on your code, the "correct" way does not always work.

Many of the problems with aligning items relates back to how the Internet browsers count margins. I have made extensive use of all of these techniques but from time to time do have that page where things won't line up the way I want until I cheat and space things manually. (I admit that this was a last resort/cheat to overcome what was probably a problem with the code surrounding the bit I wanted to center rather than a flaw with the centering techniques.)

Vertical Centering

It would seem logical that there is also a way to center text or an image vertically but the functionality simply does not exist.

There has been some suggestion that it may be included in the next version of the W3C (World Wide Web Consortium - the group who decides how HTML and CSS are to be programmed) standard but for now you would have to use tables to center something vertically.

The suggestion to use display: table-cell, along with the techniques we will discuss in this tutorial, from the www.W3.org website does not work across all browsers and is more of a theoretical solution than a practical one.

CSS to Center Text

If you want to center a paragraph with in-line style definitions, you would simply add the text-align: center attribute as follows:

<p style="text-align: center">

If you are using style definitions in the head of your page or an external style sheet to center a paragraph of text, you would add the align attribute as shown below.

p {text-align: center }

The text-align attribute will center your text in relation to the flow of your page. For example, using the in-line text definition within this page will display the text centered like the sentence shown below. (I added some space on the left and right sides to better-display the result.)

Here's a bit of centered text using the text-align attribute set to center. Each line is centered independently from the others. Depending upon your layout, this somewhat uneven, step-like alignment of the your text may not be exactly what you were hoping for. We'll talk about how to fix this on the next page of this tutorial.

text-align

You can also use text-align to right align, left align and justify text by replacing the word center with right, left or justify. The example below uses justify.

Here's what justified text looks like. Notice how the effect is to ensure the edges of text form straight lines on the left and right sides of the paragraph. I've made this paragraph only 75% of the width and with a left margin of 40 pixels to show the full effect of using text align with justify

Centering With Margins

This tutorial continues on the next page and discusses centering images with CSS and aligned and centered text.