Grow your CSS skills. Land your dream job.

best way to center website?

  • # September 19, 2009 at 10:59 pm

    I’ve been wondering about the best way to center a website, and I’ve tried a few different ways to do it.
    I’ve tried.

    Code:
    body {
    text-align: center;
    }

    but, it’s never worked well.

    i’ve also tried

    Code:
    div#pagewrap {
    margin: 0 auto;
    }

    it works well, but not for IE users.

    and i’ve also tried

    Code:
    content

    but i don’t like having to use tables unless i have to.

    any ideas guys?

    # September 19, 2009 at 11:16 pm

    I’ve never had a problem using a container DIV and the margin: 0 auto; way. Maybe instead of div#pagewrap, use JUST #pagewrap for your CSS descriptor. The other thing is you’ll really never notice the centering unless the wrapper has a width (fixed/flexible) because at 100% it just fills the screen anyway rendering the effect unnoticeable.

    Here’s a little sandbox page I’ve made for my code tests. http://dev.infiniteunreality.com/botp/ It’s a template I was coding for a site I am redesigning (trying to learn PHP templates to do it) and has a bloody mess of CSS in it, but it’s all in plain view to browse through. Also I’ve tested it against IE5.5 to IE8, Opera, Safari, Firefox 3 and up, and Chrome and with some minor box-model quirks, it’s centered fine in all browsers.

    The thing I always ran in to with the text-align:center way is that you then have to text-align:left everything else back to get it to look right so I TRY to avoid it since really it’s only needed for IE5.5 anyway.

    # September 20, 2009 at 2:44 am

    hmm, looks nice. But I don’t have a problem with the margin: 0 auto; but IE doesn’t do the auto margins, so, it’s not good for everyone looking at the website.

    # September 20, 2009 at 4:12 am

    Makeshift, I have never heard of IE not accepting the margin: 0 auto; to center a website. I think you might be misinformed.

    # September 20, 2009 at 1:41 pm

    both my IE tab for firefox and my IE 7 will not display the page as centered.

    # September 20, 2009 at 3:23 pm

    Give your wrap a width as well as the 0 auto trick, so your code will look like this:

    Code:
    #page-wrap { width: 960px; margin: 0 auto; }

    It needs a width otherwise it will fill the width of the screen.

    # September 20, 2009 at 5:30 pm

    yeah, without a particular width the auto centering thing won’t work ;)

    # October 6, 2009 at 7:42 am

    hi, this solution only work with horizonal center, but is there any way to centered the website by height??

    so you change your browser it is centered from height too??

    is there any way to fix this?

    thanks for reading

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".