pic

Centering site with css

Posted by webdesigncut on October 31st, 2009 in Css.
1 Comment »
port_large

Well this is a very common problem for css newbies of how to center a site using css.I am sharing this helpful tutorial with you.

You can center a site using wrapper div
Step 1-the css part

In your style sheet you have to first add this css



body {
text-align:center;
}
#wrapper {
margin: 0 auto;
width: xxx; /* Replace the xxxx with the the width of your site (eg 770px)*/
text-align:left;
}

Explanation:
In the body add text-align:center as this will fix a problem that some browsers have with margin:auto. However this will make all the text in anything be centered so to fix this in the wrapper you will tell all the text to go back to the left, this way you are resetting the default position of the text and will place the text left unless you tell it in a different div/class to be otherwise.

in the wrapper, the 0 is there to tell the top and bottom not to have a margin, this can be changed if you want there to be a top and bottom margin.

The auto tells the left and the right to automatically set a margin. So it takes into account the space that remains and divides it between the left and right margins, making the content centered on the page.

And now you just have to add this in your html
Stage 2-the html part

here in the body tag you just make a seperate div with id “wrapper or the name you specied for yor id in css” and put everything inside it which will get centered


One Comments

  • bifeIrratet
    bifeIrratet 07 Aug, 2010

    Hey, nice site! Thanks for posting. I’ll check back.

Leave a Comment


pic
pic