09
Sep
2009
Center a website using CSS
You built a great website layout which is 960px wide, and you want to centre (center for EN-US) the website using CSS instead of the dreaded <center> tag. CSS makes this really simple.
Starting with the HTML we have a div which is called wrapper which contains all the content.
<div id="wrapper">All of my content goes here</div>
The CSS is used to centre the content.
//first get rid of the padding and margin for the body
body{
padding:0;
margin:0;
}
#wrapper{
width:960px; //sets the width of the div, is required
margin: 0 auto; //sets the top and bottom to 0 and left and right to even hence the centre
}
body{
padding:0;
margin:0;
}
#wrapper{
width:960px; //sets the width of the div, is required
margin: 0 auto; //sets the top and bottom to 0 and left and right to even hence the centre
}
If I remember correctly, IE7/6 doesn’t support “Margin:0 auto”. Instead of using that, you will have to use “text-align:center” on a div that can wrap around the #wrapper.
So basically:
CSS:
#iefix {
text-align:center;
}
#wrapper {
margin:0 auto;
width:960px;
text-align:left!important;
}