Centering a Website
<body>
<div id="page-wrap">
<!-- all websites HTML here -->
</div>
</body>#page-wrap {
width: 800px;
margin: 0 auto;
}<body>
<div id="page-wrap">
<!-- all websites HTML here -->
</div>
</body>#page-wrap {
width: 800px;
margin: 0 auto;
}
You also need to do `
As IE won’t always do auto margins.
Thanks!
My organization has an older version of IE so the code didn’t work the first go around. Adding the body element worked perfectly!
IE is not ok…
Upgrade IE or use mozilla…
Upgrading IE is not an option for a lot of people. A lot of organisations lock their systems to that software can’t be updated and new software can’t be installed. Fixes for IE generally still need to be included.
Continuing to support IE6/7 by making hacks and workarounds hurts the web industry… you don’t add compatibility stuff for 10-year old Mozilla… do you?
@Alexander: It’s not possible for some developers to drop support for IE6/7. I’m the front-end dev for an eCom site that still has a double-digit percentage of IE6 users thanks to education and enterprise. It’s a sad reality, but I still have to include IE hacks in my code.
Für den IE Versucht es mal so:
Absolute positioning will not be a good solution for complicate websites. The main snippet + (center aligned body)is the best solution
You can also use the
<pre>
<center>
</pre>
tag at the top of the page.
Do ist like this:
#page-wrap {
width: 800px;
text-align: center;
margin: 0 auto;
}
*{
margin:0px;
padding:0px;
}
body {
text-align:center; /* thi is good */
}
#page-wrap {
width: 800px;
text-align:left;
margin: 0 auto;
}
you can use following code, it will run in all browsers properly
Ashish, no can see your code!
Thanks so much … got it sorted just lacked the word auto!!!
Thanks for sharing keep helping us!
very helpfull, thanks for sharing Eddie
hi ed…. thanks for this tutorial……!
actly what i use to face earlier when i use to slice my design in photoshop and export to webpage then the whole page was portrait on the left side of the page, so i think with this code it’s not gonna happen right …………?
in old IE’s just use doctype as first page element, exemple:
…
and margin:auto will be work
Great tutorial for noobs (i am one of the best noobs!)
I made it thnx chris!
Love css any guide to learn more???
Amazing content/posts/tutorials on this website, you totally rock man!
Text align center should never be used to position an object. Zeroing out my margins and padding with a wild card is also another poor practice. I would recommend using EricMeyer’s CSS reset. If margin: 0 auto is causing you issues, use:
#page-wrap {
position: absolute;
left: 50%;
width: 800px;
margin-left: -400px;
}
This made sense and worked flawlessly for me. There was also no need for me to change text alignment in the body selector’s css. Thanks Bob.
and done
The tutorial is done correctly people! remember to set your DOCTYPE correctly.
the best to use would be..
!DOCTYPE html
I have used two primary methods for this in the past, but I’ve probably used the latter more often.. method #1, lightweight. . .
and method #2, which should override any problems…
Whatcha think?
where to learn more???
I have a website build in WordPress.Is this code capable for it?
*{padding: 0; margin: 0 auto;}
body{
text-align: center;
}
#page-wrap{
width: 800px;
position: relative;
text-align: left;
}
#page-wrap
{
width: 800px;
margin: auto;
}
TRying to work with margin: 0 auto; but dont know i am failing all the time :(
Moving the world off Internet Explorer 6 –> http://www.ie6countdown.com/
{width:960; margin:0 auto;}
today is best technique
I used the following code for my HTML, and CSS stylesheet, and it worked like a charm. My site was actually width 1000, so I just edited to read from 800 to 1000, and at margin-left -400, I changed it to -500 following the format code below.
For my CSS stylesheet I added the following code:
page-wrap {
position: absolute;
left: 50%;
width: 800px;
margin-left: -400px;
}
Thanks for the script. This works for me. I modify the css then I can made the website with 1000px center.