11.11 Creating Center-Aligned Body Elements

NN 4, IE 4

11.11.1 Problem

You want paragraphs or other body content of a fixed width to be center-aligned within the page.

11.11.2 Solution

You have two approaches available to you. One is backward-compatible, while the other works in standards-compatibility mode for the newer browsers (see Recipe 11.13). The backward-compatible approach is to encase the element to be centered within an arbitrary div element, and then assign the text-align style sheet rule to the outermost block-level element. For example, to center a group of narrow paragraphs on a page, begin with the following style sheet rule for the paragraphs:

p.narrow {width:70%}

Then wrap those paragraphs with a div element whose style sheet rule reads:

div.centered {text-align:center}

In standards-compatible mode, you can do away with the div wrapper element, and specify left and right margin settings for the paragraphs:

p.narrow {width:70%; margin-left:auto; margin-right:auto}

Browsers in the old mode (including IE 6) ignore the margin settings and render the narrow paragraphs flush left.

11.11.3 Discussion

These style sheet techniques supplant the center element and the align attribute of numerous block elements—HTML terminology that is deprecated in HTML 4. Centering an element vertically in the browser window is not as simple, and typically requires the help of absolute-positioned elements, described in Chapter 13.

11.11.4 See Also

Recipe 11.13 for IE 6 compatibility modes; Recipe 13.7 for centering a positioned element in a window or frame.