I made a CSS template
And I want to make it in the center of the page
when I open the browser
it appears on the left of the page
any help please
views:
119answers:
5
+11
A:
You need to use margin:auto with specified width like this:
#wrapper{
margin:auto;
width:1000px; /* adjust width */
}
Where #wrapper is supposed to be the main container element on your page.
Sarfraz
2010-09-02 13:05:43
there's a common gotcha with this, making your centered div jump a few pixels to the left between pages depending on whether scrollbars are active or not. a common solution is given here http://stackoverflow.com/questions/1202425/html-css-making-the-main-scrollbar-always-visible/1202542#1202542
second
2010-09-02 13:19:48
It's worth noting that this will affect the top and bottom margins of `#wrapper` as well.
Alison
2010-09-03 08:52:35
thanks for all answers
Maged
2010-09-03 18:48:06
A:
user
body{
margin:0 auto;
}
or top root parent id
#parentid{
margin:0 auto;
}
JapanPro
2010-09-02 13:09:30
The body tag defaults to 100% width. Therefore, setting the left and right margins to auto will have no effect whatsoever.
Brian Ray
2010-09-02 13:47:47
+2
A:
To get this centered properly, the wrapper needs to have a set width and we need to set the left and right margins to auto.
#wrapper {
width: 960px; /* set to width of content */
margin: 0 auto;
}
Sarfraz was on the right page, but there is no reason to set the top and bottom margins to auto. We should only affect the properties that are necessary to get the result we want.
Brian Ray
2010-09-02 13:53:04
A:
My method is slightly different to those already here so here's my suggestion.
div#wrapper {
width: 960px;
position: absolute;
left: 50%;
margin-left: -480px;
}
Where #wrapper is a div containing the main content of your site.
margin-left should equal whatever half of your width is.
diggersworld
2010-09-02 14:02:04
Is there any advantage to this solution over `margin-left:auto; margin-right: auto;`?
Alison
2010-09-02 14:07:03
This is a good solution for centering something vertically, but it seems kind of unnecessary to take the entire wrapper out of the standard flow by positioning it absolutely. Also, there are much simpler solutions that aren't hacks.
Brian Ray
2010-09-02 14:21:56
RE: Brian - If you didn't want to take it out of the flow, you could use position: relative; Then anything that followed the div would appear where it should. It's already quite simple, so I wouldn't define it as a hack.RE: Alison - I don't think there is an advantage / disadvantage in using either. This is just the way I've always done it, and it always worked for me.
diggersworld
2010-09-02 14:42:12
@diggersworld at the risk of sounding rude, this solution doesn't seem elegant to me
Alison
2010-09-03 08:54:02
@diggersworld, this is unnecessary all the way around. Why would I do all of this when I could do it with 2 styles, width and margin?
Brian Ray
2010-09-03 12:21:51
@Brian, you don't have to do it this way, it was just an alternate suggestion. Semantically he wants to position his wrapper in the centre of the page, so I use the position attribute to highlight that. Margin is part of the box model. Technically they work in a different way, visually they work the same. Like I said it's just an alternative.
diggersworld
2010-09-07 09:27:43
A:
Specify left and right margins as auto and set a width for the body:
body {
margin-left: auto;
margin-right: auto;
width: 780px;
}
I chose 780px for the width, but you could put whatever you want. Specifying in other units (e.g. em, %) should work too.
Alison
2010-09-02 14:08:20