Skip navigation
This discussion is locked
Currently Being Moderated

Centering a page

Jun 26, 2009 5:13 AM

Centering a page with CSS is very easy. Simply wrap the entire content of the page in a <div>, give the <div> a unique ID, such as wrapper, and create a CSS style.

 

  • The CSS style should use the same name as the ID, preceded by a hash sign, e.g., #wrapper.
  • It should also have a declared width. It doesn't matter whether the width is in pixels, ems, or a percentage, but this technique won't work without a declared width.
  • Finally, the style should set the left and right margins to auto.

 

To hand-code the CSS style, it should look like this:

#wrapper {
  width: 940px; /* adjust the width to suit */
  margin: 0 auto;
}

 

To do this through the Dreamweaver interface:

 

  1. Select everything in the page, by clicking the <body> tag in the Tag selector at the bottom of the Document window

    body.png
  2. Select Insert Div Tag from the Common (or Layout) category of the Insert bar/panel. Alternatively, select Insert > Layout Objects > Div Tag.
  3. In the Insert Div Tag dialog box, make sure that "Wrap around selection" is selected, enter the name of the ID in the ID field, and click the New CSS Rule button.

    insert_wrapper.png
    Older versions of Dreamweaver do not have the New CSS Rule button. If you're using an old version, click OK, and select the New CSS Rule icon at the bottom of the CSS Styles panel. Select Advanced as the Selector Type, and enter #wrapper in the Selector Name field.
  4. In the New CSS Rule dialog box, choose whether to define your rule in the current document or an external style sheet (an external style sheet is preferable). If you need to create a new style sheet, follow the onscreen instructions. Then click OK.
  5. In the CSS Rule Definition dialog box, select the Box category from the list on the left. Enter a value in the Width field, deselect the Margin Same for all checkbox, and set the Margin Right and Left fields to auto.

    wrapper_rule.png
  6. Click OK to create the rule. This returns you to the Insert Div Tag dialog box. Click OK to close it.
  7. Your page content is now centered.

 

To centre the remaining pages in your site, create a wrapper <div> around the content, and attach the same style sheet.

 

NOTE: This technique does not work with pages laid out using AP elements (layers). Using absolutely positioned elements for page layout is generally considered a poor choice. For an explanation, see this article by Gary White.

 

More Like This

  • Retrieving data ...

Bookmarked By (2)