Horizontal CSS centring

In CSS, there is sharp distinction between centring inline elements like text on the one hand, and block elements like divs on the other. The techniques are quite different. Most horizontal centring can be accomplished easily by the application of these two techniques (sometimes in combination). How some browsers with poor or awkward CSS support behave is another matter altogether; do not expect compliant behaviour from IE6 and 7. Extra measures need to be taken with IE6 and 7.

We will race through the basic well known techniques (which you can read about in many places). Centring (or, as Americans would have it, centering) is a fundamental technique for making web pages. You can just sort of know the techniques as blind algorithms and this might do you or you might in addition want to fossick about in the why, wherefore and pitfalls. For this latter, a greater understanding of margins, elements, widths, paddings, borders will be called for and these rather more interesting details are what I will be dealing with in subsequent pages.

Centring inline elements

The basic technique: give the element containing the inline material 'text-align: center;'

In modern browsers you can centre an inline image or a text string horizontally by making the element that the text or picture is in, text-align: center. You can do this also by applying this style to an ancestor of the element containing the text or image. The style can be inherited by the descendants. But let us illustrate the simplest of cases, the style directly on the element containing the inline material to be centred. In the following illustrations, parent reference containers have a background of grey and are 500px wide - I won't complicate the displayed markup in the captions with this information. These containers are needed to show what the centring is in respect to.

Fig 1. <div style="text-align: center">centred text</div>

Fig 2. <div style="text-align:center"><img src="ruler.png" width="300" height="30" alt=""></div>

Notice that in centring via text-align, the browser knows the width of strings and images without authors having to specify. It takes the intended object (string or image) and does the calculation and finds the mid point. But it is good practice (for other reasons) to put the width and height in the img element.

Now let's get a bit more complicated to see what happens when one element is assigned the text-align style in a small family of parent and child, say a div and inner paragraph. First when the parent only is assigned the style and then when the child only is assigned the style:

Fig 3. <div style="text-align: center;"><p>text in green paragraph</p></div>

Fig 4. <div><p style="text-align: center;">text...</p></div>

What is happening in Fig.3 is that the child is inheriting the style to centre inline objects like text or pictures. And this will generally happen to further descendant block elements. In Fig.4, the style is directly applied to the paragraph. The effect is the same.

If you are wondering about what might be the practical difference between 3 and 4, consider if you wanted some text or an inline picture in the parent itself, outside the paragraph element. Now this text or picture will not be centred if it is done with mark up like 4, but will be with markup like 3. Because in the one case both parent and child have the style, one by explicit instruction and the other by inheritance. Whilst in the other case, only the child has the style, the parent's loose text is left-aligned by default (for left to right writing).

Let's illustrate this by repeating both 3 and 4, calling them 3a and 4a respectively and adding some inline text into the parent:

Fig 3a. <div style="text-align: center;">Loose text in parent<p>text in green paragraph</p></div>

Fig 4a. <div>Loose text...<p style="text-align: center;">text in green pragraph</p></div>

Note, the above examples and explanations do not gel with what IE6 and 7 do. In Fig 3. in IE, you will see the green paragraph block element centred as well as the text. A big nuisance! To make IE appear like in compliant browsers, you can remove the align style on the parent and stick it on the child. IE thinks the style of align applies to the the block element itself directly (rather than inline content), it centres the block itself. Similar remarks apply in respect of Fig 3a. The green para gets to be horizontally centred in the parent in IE6 and 7. To fix, consider delivering a style for IE6 and 7 eye only, there are ways to do this. You can use "IE conditional comments" to avoid. No centring of the block child element should occur in any of the above.

We will consider centring block elements next.