Examples on how to center your page on all browsers including internet explorer
Margin auto, this method is simple and useful for relative divs, but it does not work on older versions of internet explorer.
The unsupported browsers that ignore the "margin auto" property
The html code for the page
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="content-language" content="en" />
<title>Test page</title>
</head>
<body>
<div id="container">
Lorem ipsum
</div>
</body>
</html>
CSS code
body
{
/*some browsers add margins and padding by default, remove them*/
margin:0px;
padding:0px;
}
#container
{
width:800px;
height:600px;
/*visual aid so we can see the div*/
border:1px solid #000;
/*center div*/
margin:0 auto;
}
Text align center, this method works for internet explorer and requires you to put "text-align:center" css attribute in your "body" style and later reset it by adding "text-align:left" (or right) in your divs (or other layout structure). This method works on all versions of internet explorer
body
{
/*some browsers add margins and padding by default, remove them*/
margin:0px;
padding:0px;
/* center everything*/
text-align:center;
}
#container
{
/* reset text centering*/
text-align:left;
width:800px;
height:600px;
/*visual aid so we can see the div*/
border:1px solid #000;
}
By combining the two methods above you can center your layout on all browsers including internet explorer, here is an example
body
{
/*some browsers add margins and padding by default, remove them*/
margin:0px;
padding:0px;
/* center everything for ie*/
text-align:center;
}
#container
{
/* reset text centering*/
text-align:left;
width:800px;
height:600px;
/*visual aid so we can see the div*/
border:1px solid #000;
/* center everything on other browsers*/
margin:0 auto;
}
Negative margin method works by setting the left property to 50% and later subtract half the width of the div from it's left margin. This method works on all browsers including internet explorer. The div must be absolute positioned on the page (have "position:absolute" property)
body
{
/*some browsers add margins and padding by default, remove them*/
margin:0px;
padding:0px;
}
#container
{
position:absolute;
width:800px;
height:600px;
/*visual aid so we can see div border*/
border:1px solid #000;
/* center */
left:50%;
/*substract half the width of the div (400px in our case) from margin-left*/
margin-left:-400px;
}
Share this with the world
Related
Comments
Cool. Something basic yet very informative to save a lot of struggle.
Posted on 2007-11-19 08:51:09thanks
thanks for your helpful articles! especially, i was looking for this code for 2 months :) this is my lucky day! thanks.
Posted on 2007-12-01 22:07:12You have described some of things I was lookgin for, for a long time.
Posted on 2008-01-08 10:36:38Make yourself heard