Do you ever wonder how you can center a containing div?
The use of “tables” or “center” tag makes the job a lot easier, but it will fail validation.
Another way of doing this is using CSS stylesheet.

body{padding:0px; margin:0px; text-align:center;}

#div_container{margin-left: auto;margin-right: auto;width:800px;}

The only problem with the above solution is that “#div_container” will also have the text centered.
To overcome this problem you have to specify the “text-align” tag as below:

body{padding:0px; margin:0px; text-align:center;} #div_container{margin-left: auto;margin-right: auto;width:800px;text-align:left;}

W3C Visual formatting model explains: “If both ‘margin-left’ and ‘margin-right’ are ‘auto’, their used values are equal.
This horizontally centers the element with respect to the edges of the containing block.”

Be Sociable, Share!

• 

This entry was posted on Monday, October 15th, 2007 at 10:59 am and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

(No Ratings Yet)

 Loading ...