CSS Centering Web Page
May 2nd, 2009 | By sguler | Category: Css, DesignIf you are new to CSS, you may be having diffucult to center web pages horizontally. I remember I was trying to center the page by defining extra divs with align:center attributes. That is not necessary though. Just adding a margin attribute which is set to “auto” for left and right would do the trich to center your pages. See the following css code:
/* CSS Document */ body { text-align:center } /*For IE6 Shenanigans*/ #content { width:907px; margin:0 auto; text-align:left } /* Centering Page */ |
You see the margin attribute ? By setting it to auto, the margins to the left and right will be automatic, which means your page will be centered. Of course, you have to specify a width for your div, otherwise the browser will not be able to calculate the margins to the left and right. The following shows the HTML code.
<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt--> <div id="content"> <!-- ALL THE CONTENT GOES HERE --></div> |
That’s it. Enjoy.