The following tutorials will show you how to center your website using an ID selector in CSS.
THINGS YOU MIGHT NEED:
CSS basic knowledge
HTML file
External CSS file
HTML File:
<body>
<div id="page-wrap">
all websites HTML here
</div>
</body>In other to avoid margin conflicts when resizing your window, it is very important to set the width of the selector to a giving pixel ( e.g 800px ) and also set the margin's initial value to 0 and auto to horizontally center the page.External CSS File: #page-wrap {width: 800px; margin: 0 auto; }
Examples:
margin: 5%; /* all sides 5% margin */ margin: 10px; /* all sides 10px margin */ margin: 1.6em 20px; /* top and bottom 1.6em, left and right 20px margin */ margin: 10px 3% 1em; /* top 10px, left and right 3%, bottom 1em margin */ margin: 10px 3px 30px 5px; /* top 10px, right 3px, bottom 30px, left 5px margin */ margin: 1em auto; /* 1em margin on top and bottom, box is horizontally centered */ margin: auto; /* box is horizontally centered, 0 margin on top and bottom */
margin: auto; background: gold; width: 66%;
margin: -1em 0 100px -40px; background: plum; width: 20em;
No comments:
Post a Comment