Center Webpage using CSS
This tutorial explains how to center a webpage horizontally as this page.
Demo: Demo1.
The most commonly used method is the auto-width margin method which I am using.
Unfortunately this method is not directly supported by Internet Explorer. But there is a workaround to achieve it in Internet Explorer.
We add text-align: center;
property to the body element.
This results in all of the text on the page being centered.
To overcome this add text-align: left; to the main division OR the other elements where you want the text to be aligned
to the left.
body {
margin: 50px 0px;
padding: 0px;
text-align: center; /* For IE */
}
div#page {
width: 600px;
margin: 0px auto;
text-align: left; /* For aligning the text to the left */
padding: 15px;
color: #cccccc;
border: 1px solid #666666;
background: #005599;
}
You can see it in action here
