I have always been wondering how other people get to align to the centre the main div container as the only way I manage so far is adding to the css file the following:
*{
padding:auto;
margin:auto;
text-align:centre;
}
I have seen other pages using: *{padding:0px;margin:0px} but I can't see where or what do they do to centralise the main container.
Could anybody explain how?
Code example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
<title>This is the main container</title>
<style type="text/css">
*{
padding:auto;
margin:auto;
text-align:center;
}
</style>
</head>
<body>
<div style="width:400px;background-color:#66FFFF;display:block;height:400px;">
<b>This is the main container.</b>
</div>
</body>
</html>
Could anybody explain how do they do it in the following page?
The basic principle of centering a page is to have a body CSS and main_container CSS. It should look something like this:
body {
margin: 0;
padding: 0;
text-align: center;
}
#main_container {
margin: 0 auto;
text-align: left;
}
You can text-align: center the body to center the container. Then text-align: left the container to get all the text, etc. to align left.
I would omit the * { text-align:center } declaration, as it sets center alignment for all elements.
Usually with a fixed width container margin: 0 auto should be enough
Source: Stackoverflow.com