center a page

[aamir2100]

Hi !

i m a beginner , i made a website on dream weaver first time . Its nice but wen i see on browser it goes left . i want put it to center. one more thing . when i see on desktop browser it comes in center but when i see on laptop it goes left.
so please help me out to this problem. i will be very grateful.
if you give me html code it wud be best for me.
i m waitin for response from anyone..........
bye

[Sorcher]

If your page contains a div tag with all the contents inside it, you could simply use <center></center>
If its more complicated than that, try use this:
http://sillydog.org/forum/how-to-center-my-web-page-t9357.php

Sincerely,
Sorcher

[teedoff]

Please dont use the <center> tags, they have been outdated for years!

To center a page, you need a valid doctype, a div that contains everything except the opening and closing body tags, and then a specified width for this div thats less that the width of the view port. For example:

#wrapper {
           width: 960px;
           margin-left: 50%; //this will set the div 50% to the right of any view port regardless of how wide it is

}

[shaya4207]

+1 to teedoff for saying not to use <center></center>, since it has been deprecated a while ago.

Only thing I disagree with teedoff is, 'margin-left: 50%;' will move it the left side half way into the viewport, in this case it would be 480px to the left, and the stuff inside will start there, you'd rather want to make 'margin-left: auto; margin-right: auto;', which will make the empty space on both sides automatically equal.

[teedoff]

You actually may be right about the margin-left: 50% style. There was something like that I used before, but like it is, it doesnt work. At least not correctly centering the page anyway. S0rry for the mix up...lol

Another way(shortcut) is margin: 0 auto;

I KNOW this works and personally I like better. Shorter cleaner code is always better!
That will center any element as well.

[shaya4207]

Well 'margin: 0 auto;' will give it a 'top' & 'bottom' of 0, the OP didn't ask for that, what if they only want 1 div to be centered with a margin-top of 25px?

[teedoff]

hmmm well this one actually works. I use it and I can still specify top and bottom margins. It doesnt give 0 top or bottom margins when using it, but I always use a global style to set everything to 0 margins and paddings, then style each element.

#wrapper{
         margin: 0 auto;
         margin-top: 10px;

        }

This is the exact style I'm using in a site right now. SO I know it works.

[shaya4207]

hmmm well this one actually works. I use it and I can still specify top and bottom margins. It doesnt give 0 top or bottom margins when using it, but I always use a global style to set everything to 0 margins and paddings, then style each element.

That's awesome!!! But I think that without explaining exactly what the 'margin: 0 auto;' would do, they might get confused when something they're not trying to do - happens...

And adding another line for 'margin-top' is just wrong, the correct way to do it would be 'margin: 10px auto 0 auto;' (order being 'top' first, then going clockwise), although it works, and is technically correct, it's still bad syntax, and a bad habit to get used to.

[teedoff]

well again he asked how to center a page to which I relied you need three things.

margin: 0 auto; centers the page.

[shaya4207]

well again he asked how to center a page to which I relied you need three things.

margin: 0 auto; centers the page.

Once again, that does more than just center the page, why didn't you also say

background: #000;
border: 17px solid #369;
font-size: 29px;
margin: 35px auto;

? That ALSO centers the page???

[teedoff]

This isnt a debate...lol margin: 0 auto; centers the page and thats all it does....sheesh....works in the css I use anyway. Im done debating this.

[shaya4207]

:), My point is that it's not 'all' it does...

[floatingDivs]

:), My point is that it's not 'all' it does...

Hi shaya4207,

The reason it does more than just center the page (it also pushes the wrapper down by putting margin above it and below it) is because margin: 35px auto; means the following:

margin-top:35px;
margin-right:auto;
margin-bottom:35px;
margin-left:auto;

margin:0 auto;

means margin-top and margin-bottom are put to 0px and margin-right + margin-left are put to 0px;

The short-hand notations may seem confusing, so read this page under "Margin - Shorthand Property".

[shaya4207]

We're all agreeing to the same thing, what I'm saying is that if a newbie just gets used to this without knowing what they're doing, they might get confused. The right answer for the OP is, 'margin-right: auto; margin-left: auto;'...

[floatingDivs]

We're all agreeing to the same thing, what I'm saying is that if a newbie just gets used to this without knowing what they're doing, they might get confused. The right answer for the OP is, 'margin-right: auto; margin-left: auto;'...

Well, this is awkward. For some reason, I thought you were the OP and were responding to teedoff after having asked the question.

My fault.

[shaya4207]

No problem... Apology accepted ;)