How to Center My Whole Web Page
A centered Web page gives your visitors a convenient way to look at your work because your page always displays in the center of a browser, even if the viewer shrinks or stretches the window. Traditionally, websites align to the left in the browser, but you have the option to add Cascading Style Sheets (CSS) to create the rules for how to render your display. Access your computer's text editor to enter the CSS code that centers your whole Web page.
Other People Are Reading
Instructions
-
-
1
Bring up your text editor software and launch your Web page file. Type the following between the "<head></head>" tags to create a place holder for your CSS rules:
<style type="text/css">
<!--
-->
</style>
-
2
Enter the "body" class rule between the dashes in the code above and type "margin: 20px 0px;" and "padding: 0px;" between the curly brackets. Further, enter "text-align: center;" to ensure that your page appears centered on the Internet Explorer 5 browser. To illustrate:
body { margin: 20px 0px; padding: 0px; text-align: center; }
-
-
3
Type a word of your choosing, such as "#main," which names the CSS rule that controls the content alignment on your page. Enter "width," "margin," "text-align" and "padding" attributes in the curly brackets as follows:
#main { width: ; margin: ; text-align: ; padding: ; }
-
4
Enter a number after the width to determine the horizontal length of your Web page. Type a value after padding to specify how much blank space there is between your text and any borders of your page. Enter "0px auto" after "margin" and "left" after "text-align" to support the center alignment goal. For instance:
#main { width: 650px; margin: 0px auto; text-align: left; padding: 10px; }
-
5
Save your file. Your complete code now looks as follows:
<style type="text/css">
<!--
body { margin: 20px 0px; padding: 0px; text-align: center; }
#main { width: 650px; margin: 0px auto; text-align: left; padding: 10px; }
-->
</style>
-
1
Tips & Warnings
You have the option to change the "20px" value of the margin (Step 2) to control how much space appears on the top and bottom of your Web page.
Preview your work by selecting your browser's "Open" or "Open File" option under the "File" menu and then select the Web page from the dialog window that appears.
