Centering web pages and other elements with CSS
Problem
I want to center my web page in all browsers, even if it contains AP Divs.
Solution
Centering block-level HTML elements is easy: just make sure the element has a declared width, and set the left and right margins to auto. To center a page, wrap the entire contents in a div, and set its horizontal margins to auto. If the page contains AP Divs, set the position property of the wrapper div to relative.
Detailed explanation
Setting the
margin property of a block-level element, such as a
div or paragraph, to
auto tells the browser to calculate the margin
automatically. So, setting the left and right margins to
auto centers the element. However, the browser can
perform the calculation only if it knows how wide the element is.
So the element must have a declared width for the browser to center
it horizontally.
Wrap the contents of the page in a div, and give it a unique ID,
such as
wrapper like this:
<body>
<div id="wrapper">
<h1>This page is centered!</h1>
<!-- rest of page content goes here -->
</div>
</body>
In your style sheet, create a style rule with an ID selector for the wrapper div like this:
#wrapper {
width: 960px;
margin: 0 auto;
}
This centers the page, but leaves everything within the wrapper
div left-aligned. This example uses pixels for the width, but you
can use any valid measurement, such as ems or a percentage. The
margin property has been given two values. The first
one applies to the top and bottom margins; the second applies to
the left and right margins.
Adding the wrapper div
The simplest, and most accurate way to add a wrapper div to a
page in Dreamweaver is to select
<body> in the Tag Selector at the bottom of the
Document window. Then click the Insert Div Tag button in the Insert
panel/bar. In the dialog box that opens, select "Wrap around
selection" in the Insert pop-up menu, and type the name of the ID
into the ID field. You can also click the New CSS Rule button to
create the style rule for the wrapper.
Centering other elements
You can use the same technique to apply to any other block-level element, such as paragraphs or blockquotes. However, remember: the element must have a declared width. Without a width, the browser can't calculate the margins, so the element remains left-aligned.
It's often difficult or undesirable to give headings a width.
So, to center a heading, use
text-align: center.
If you use
text-align: center for any other elements, it not only
centers the element, but also each line of text within it, which is
probably not what you want.
Centering an image
Setting the horizontal margins to
auto works only on block-level elements, so this
technique needs to be adapted slightly when applied to inline
elements, such as images. Fortunately, CSS provides a simple
answer: set the
display property to
block. The following class can be applied to any image
that you want to center:
.imgcentered {
display: block;
margin-left: auto;
margin-right: auto;
}
If you're wondering why this class doesn't use a width, the
answer is: you should always declare the width of an image in its
HTML markup. So, the browser takes the width from the
<img> tag, meaning this class can be applied to
any image you want to center, regardless of its size.
Centering a page that contains AP Divs
Using AP (absolutely positioned) Divs for page layout is
generally not a good idea, but if you do use them within a page,
it's very easy to keep them in alignment with the rest of the
content. As before, the technique relies on wrapping the whole page
in a wrapper div with a declared width and setting the horizontal
margins to
auto. All that's needed to keep the AP Divs in
alignment is to set the
position property of the wrapper div to
relative like this:
#wrapper {
width: 960px;
margin: 0 auto;
position: relative;
}
The reason this works is because absolutely positioned elements
take their position in relation to their containing block. A
containing block is the closest outer element that has its
position property set to
absolute,
fixed, or
relative. If no such element exists, the page itself
acts as the containing block. Setting the
position property of the wrapper div to
relative without any offsets (
top,
left, etc) creates the necessary containing block, but
doesn't affect the wrapper's own position. As a result, the page is
centered, and any positioned elements nested inside the wrapper
move in alignment with it.
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
