How to Center a Page in Dreamweaver

by Hough on June 20, 2012

How to Center a page in Dreamweaver Video Tutorial

Centering a page makes the text easier to read and easier to view by smaller screen resolutions. It is best if you use an external CSS style sheet for creating style sheets. With an external CSS style sheet you can make site wide changes instantly and separating the CSS from the HTML makes it easier to read the code.

1. If you do not already have a CSS style sheet go to File > New and select CSS for page type.

2. To center your page in Dreamweaver you will need to set the width and margins for the body type selector as this will set the values for elements within the body tag which encompasses the entire content for that page including any headings, body text and images you may use.

3. Add the following selector type to your style sheet:

body {
width: 650px;
margin: 0 auto;
}

4. Set the width of your page to a value less than your screen resolution width. A width of 650 pixels should leave plenty of room for margins on the left and right hand side.

5. Next set the values for the margins. Normally you would enter four values for the margins – the top, right, bottom and left margin each separated by a space. However using shorthand notation you can simply provide two values. The first value which I have set to zero sets the top and bottom margins and the second value sets the left and right margins.

6. Rather than entering a numerical value for the right and left margins I am going to set these margins to auto. This has the consequence of centering the body of the page automatically without having to give specific values for the right and left margins.

7. Now save the CSS file and view the page in a browser. The page should now be centered. Should the visitor have a small screen resolution the text will automatically adjust to fit their screen.

Leave a Comment

Previous post:

Next post: