Centering your page by adding code
to your HTML files

---

Using a typical Print Shop web page template, we publish to folder.  Inside the folder we open the index.html file with our web browser.  The web page looks like this on a screen resolution of 1024x768.

Because the design elements only take up approx. 590 pixels of our 1024 pixel wide screen, everything looks left justified to the extreme.

Conceptually, we want to put an invisible box around all the design elements and then move the box to the center of the screen, for all screen sizes, whether they be 800, 1024, 1280 pixels or wider.

Open index.html with NotePad

The new div tags create the "invisible box".  The center tag moves the box to the center.  The code that you add is shown in red.  Notice where this code must be typed in: after the beginning BODY tag and just before the end BODY tag.

The value of your width attribute (shown underlined in blue) depends on the width of your "invisible box".  If you make the box too wide or too narrow, the contents of the box will appear off-centered.

---

After you save your changes, refresh your browser and you will see that everything is now shifted over.  If not, go over your code very carefully.  Leaving out a bracket or mixing up colons and semi-colons will mess up your page.

You will need to add this code to page0002.html, page0003.html, etc.