CSS Centering Web Page

May 2nd, 2009 | By sguler | Category: Css, Design

If 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.

  • Share/Save/Bookmark
Tags: , ,

Leave Comment