View comments | RSS feed

(Optional) Center the contents of the page

Lastly, you'll use the tag selector to select all of the HTML in the document, and center the document's contents.

NOTE

 

Some browsers (such as Internet Explorer 6), center the page's text within the context of the table cells when you use the method described in this section. If you don't like how this looks when you preview the page in the browser, you might want to skip this section, and leave the contents of your page aligned left.
  1. With the index.html page open in the Document window, click the <body> tag in the tag selector.



    Clicking the <body> tag selects everything between the open and close <body> tags in the Document window. To see the selection, click Code view at the top of the Document window.

  2. In the Property inspector (Window > Properties), click the Align Center button.



    Dreamweaver inserts CSS <div> tags that center the body content of the page. In Design view, a dotted line borders the area that the <div> tags center.

  3. Save the page.

Your page is now finished. The last task of building your website is to publish the page. To publish the page, you must define a folder on a remote site and upload your files to that folder. For instructions, continue to the next tutorial.

Comments


ltaylor934 said on Sep 23, 2005 at 2:19 PM :
When the <body> tag is selected, the Property Inspector does not show a Align Center button or option. There is no <div>.
ltaylor934 said on Sep 23, 2005 at 2:26 PM :
There it is. I was looking for a drop-down list, or a label, "Align Center". Just an icon.
atgraphics said on Sep 29, 2005 at 1:23 PM :
nice looking page... to overcome centering in IE is to assign for menu block a <div align="left"> (click to one of menu items and select underneath <td> tag > in properties pane "centered" button and DW makes all the thing). If needed - the same with paragraphs. Yeah - it's not "so good clean CSS style" but what to do... with IE? :( only DIViding is for help /:
atgraphics said on Sep 29, 2005 at 1:25 PM :
sry - "to left" button :)
No screen name said on Oct 3, 2005 at 2:55 PM :
Fantastic Tutorial, I am basically a beginner at web design, but now I feel I could put some pages together, thanks a lot for your efforts.
-James
lnbaran said on Apr 30, 2006 at 6:54 AM :
For some reason, the navigation text shows as a fuschia color, even though it shows #FFFFFF on CSS sheet and on Property Inspector. Any ideas why this is?
jonmichael said on May 2, 2006 at 2:33 PM :
Test, please ignore
No screen name said on Jul 12, 2006 at 9:41 AM :
Using this method, my layers did not retain a center position when viewed in the browser.
No screen name said on Sep 10, 2006 at 2:19 AM :
I don't have IE 6 (mac user), so I can't test this.

What if you use two layers of Div?

The outer layer gets center, so that the whole block is centered.
The inner layer gets left, so that all elements within are left aligned.

Will that work?
No screen name said on Oct 17, 2006 at 10:14 AM :
I tried aligning the body of my page to 'center' but it didn't seem to work for the CSS based-layouts. It did work for table-based layouts but not this. Any suggestions?
No screen name said on Jan 15, 2007 at 8:35 PM :
I like the look of the centered page, but when I look in the browser, EVERYTHING is centered! Even the text within the paragraphs. Is there a way to keep normal alignment of text within the body? Maybe a css rule?

Mike

 

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/dreamweaver/8/using/gs_06_14.htm