I know this is old, but you really don’t need text-align: center; unless you’re doing something else wrong.
IE supports “margin:auto;” if there is a width set to the element, and a valid doctype. Without a valid doctype, IE enters ‘quirks mode’ where auto margins fail.
I know this post was written in 2009 but God bless you!!! I was having to work with a third-party service where I can update the header and footer to their content and only in IE was my page content left justifying.
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.
@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.
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 …………?
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:
If you use absolute positioning and the browser window is smaller than the content, it will cause the content to be hidden by the left side of the screen. Try launching IE on a small screen device such as an ATM to find out.
I have used two primary methods for this in the past, but I’ve probably used the latter more often.. method #1, lightweight. . .
html, body {
text-align:center;
width:100%;
height:100%;
}
/* original thread code */
#page-wrap {etc..}
and method #2, which should override any problems…
html, body, {
text-align:center;
width:100%;
height:100%;
}
#fullpage-div /* usually named container or wrapper */ {
text-align:center;
width:100%;
height:100%;
}
/* of course you'd add that div to the html, body style to compress your code, I included it separately here to illustrate the additional container. */
/* then add the margin 0 auto container which in this case is the original thread code */
#page-wrap {etc..}
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.
Cindy, I suffer a lot trying to find the solution to my website. Thank you very much for your instruction. Seems that nothing else worked fine to me instead of your html code. I appreciate that. Best regards, Roberto
i have one div with width 1000px,
and inside the 1000px div i have one more small div with width 300px , i need place this 300px div exactly center of the 1000px div
for this type of issues , you need to keep the display:table-cell for that particular main div and make it vertical-align:middle , then automatically if will show exactly in the center
I’ve been using the code:
page-wrap {position: absolute;left: 50%;width: 970px;margin-left: -485px;}
works fine in browsers but noticed that I have issues when viewing on a mobile – when scrolling the left side navigation disappears for about 30-40px while the right is absolutely fine.
Which works on wide screens, but on narrow screens (e.g. mobile devices) it cuts of the left hand edge. The problem with using “margin: 0 auto” is that it conflicts with various “position:absolute” commands. So this should work:
The trick is to define the “top” part in html as a separate DIV. E.g.
<div id="new2" style="position:absolute;top:188px;">
<div id="fullcontent">
[rest of page]
</div> [don't forget to close the new div!]
Then define “fullcontent” in the css file without the “top”, e.g. #fullcontent {position:absolute; left:190px;width:770px;z-index:20}
This should work. Some other parts of the HTML may also be defined as “absolute” so they get left behind: try the same sort of thing. If anything still does not work, experiment with “position:relative” inside the “position:absolute” div. If anything STILL does not work, check if the full page width is set twice: e.g. “fullcontent” defines the page as width:970px (or whatever), and some element inside that wrapper ALSO defines it, which might confuse the browser, causing it to leave tons of space on the right.
How this helps. I am NOT an expert, so cannot answer any follow on questions, but had the same problem and that seemed to work for me. I know how frustrating it is when all the tech sites say “do this, it’s easy” and you copy the code precisely and it DOES NOT WORK.
I need a solution on how we can center text when we have responsive design. My site is going to change on RD and i have tested it but not with 100% solved issues. Thanks
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 …………?
Hello, i am new in html and css … i heard a lot of flexbox… and see here a way to center hole page ,old style …. but isn’t it better to center with flexbox hole website ?
I have an issue the website is all centred and I have no issues once I upload the website the preview works but when entering URL it left aligns it please help it is doing my nut in.
How should I do if I want a background on a section all the way outside the page-wrap? Is it good practice to put all the content of a section in a container?
And thinking about responsiveness, how about going with max-width instead of width?
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!
I know this is old, but you really don’t need text-align: center; unless you’re doing something else wrong.
IE supports “margin:auto;” if there is a width set to the element, and a valid doctype. Without a valid doctype, IE enters ‘quirks mode’ where auto margins fail.
I know this post was written in 2009 but God bless you!!! I was having to work with a third-party service where I can update the header and footer to their content and only in IE was my page content left justifying.
thank you!
nice one.
fantastic.
but how to make sub menu in html with css.
Please help me.
Excellent answer thank you
@Eddie Monge
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
this solution solved my form’s alignment problem. Thank you.
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.
If you use absolute positioning and the browser window is smaller than the content, it will cause the content to be hidden by the left side of the screen. Try launching IE on a small screen device such as an ATM to find out.
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;
}
Cindy, I suffer a lot trying to find the solution to my website. Thank you very much for your instruction. Seems that nothing else worked fine to me instead of your html code. I appreciate that. Best regards, Roberto
Thanks for the script. This works for me. I modify the css then I can made the website with 1000px center.
i use flexbox for web designing and i can’t use width in flexbox so what should I do in css for align body in center?
Hi i need a solution for one scenario
i have one div with width 1000px,
and inside the 1000px div i have one more small div with width 300px , i need place this 300px div exactly center of the 1000px div
can some one help with sample
maybe u use this code in main div
{
margin: 0 auto;
padding:0;
}
It always depend on what cms we use. I had many problems with old cms that didn’t have this option, but WordPress and Joomla are easy to use.
for this type of issues , you need to keep the display:table-cell for that particular main div and make it vertical-align:middle , then automatically if will show exactly in the center
I’ve been using the code:
page-wrap {position: absolute;left: 50%;width: 970px;margin-left: -485px;}
works fine in browsers but noticed that I have issues when viewing on a mobile – when scrolling the left side navigation disappears for about 30-40px while the right is absolutely fine.
anyone else had issues?
website is http://www.teddybearfriends.co.uk/ if anyone wants to take a look
Kevin
I had the same problem, and it turns out the reason is fairly straightforward. The best way to center a site is using
#page-wrap{width: 970px; margin: 0 auto; }
But this often does not work. So you had to use
#page-wrap {width:970px; position:absolute;left:50%;margin-left:-485px;}
Which works on wide screens, but on narrow screens (e.g. mobile devices) it cuts of the left hand edge. The problem with using “margin: 0 auto” is that it conflicts with various “position:absolute” commands. So this should work:
At present, your html page says
<div id="fullcontent">
and defines “fullcontent” in css as
#fullcontent {position:absolute;top:188px;left:190px;width:770px;z-index:20}
The trick is to define the “top” part in html as a separate DIV. E.g.
<div id="new2" style="position:absolute;top:188px;">
<div id="fullcontent">
[rest of page]
</div> [don't forget to close the new div!]
Then define “fullcontent” in the css file without the “top”, e.g.
#fullcontent {position:absolute; left:190px;width:770px;z-index:20}
This should work. Some other parts of the HTML may also be defined as “absolute” so they get left behind: try the same sort of thing. If anything still does not work, experiment with “position:relative” inside the “position:absolute” div. If anything STILL does not work, check if the full page width is set twice: e.g. “fullcontent” defines the page as width:970px (or whatever), and some element inside that wrapper ALSO defines it, which might confuse the browser, causing it to leave tons of space on the right.
How this helps. I am NOT an expert, so cannot answer any follow on questions, but had the same problem and that seemed to work for me. I know how frustrating it is when all the tech sites say “do this, it’s easy” and you copy the code precisely and it DOES NOT WORK.
Happy new Year.
Chris
how to make main div page by using html
anather div of pages must be inside main div
by: omar abdi
address: mogadishu – somalia
hi
in css code what is the tag we used to keep the design site to keep in center after zoom-in/zoom-out
html,body
{
padding:0px;
margin:0px;
Centering Not working for this
what to do
I need a solution on how we can center text when we have responsive design. My site is going to change on RD and i have tested it but not with 100% solved issues. Thanks
{ margin: 0; padding: 0; }
#page{display:table;overflow:hidden;margin:0px auto;}
:first-child+html #page {position:relative;}/ie7*/
html #page{position:relative;}/ie6/
#content_container{display:table-cell;vertical-align: middle;}
:first-child+html #content_container{position:absolute;top:50%;}/ie7/
* html #content_container{position:absolute;top:50%;}/ie6*/
:first-child+html #content{position:relative;top:-50%;}/ie7/
* html #content{position:relative;top:-50%;}/ie6*/
html,body{height:100%;}
#page{height:100%;width:465px;}
Great!
Thanks
Works like a charm. Thanks
all this only centers the webpage horizontally
HOW do you center the webpage vertically???
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 …………?
Awesome Worked for me :)
Thank you very much! This worked perfectly to me :)) Learn new things are always awesome!
I know it but now it helps me to remember again.
Thank you very much for this pretty and simple code. Which solve my simple but big problem. Nice work… carry on…
thanks, lots that very helpful
Hello, i am new in html and css … i heard a lot of flexbox… and see here a way to center hole page ,old style …. but isn’t it better to center with flexbox hole website ?
I have an issue the website is all centred and I have no issues once I upload the website the preview works but when entering URL it left aligns it please help it is doing my nut in.
How should I do if I want a background on a section all the way outside the page-wrap? Is it good practice to put all the content of a section in a container?
And thinking about responsiveness, how about going with max-width instead of width?
Tried and tested. It works like a charm!