What is the best way to center a webpage's content using css?
I have seen several methods for creating simple fixed width single column layout using CSS. I like the one shown here because there is very little code involved and it works on every browser I have tried.
#container {
margin: 0 auto;
width: xxxpx;
text-align: left;
}
<body>
<div id="container">
...entire layout goes here...
</div>
</body>
The author mentioned that he开发者_运维知识库 received some criticism. I not a web developer so I wanted to ask the community what they thought about this approach. More specifically is there a better/more compatible way to accomplish this?
The "margin: 0 auto" is the best way to do it, you just have to be sure to have the right doctype for it to work. I always use XHTML strict - others will work too. If you don't have a good doctype, the content won't center in IE6
To implement the XHTML strict doctype, put this above your node, as the first line in the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
margin: 0 auto; ( or margin-left: auto; margin-right: auto; ) is really the simplest way., and there's really no issue with sticking with it for centering content.
I'm of the opinion that the width tag should be max-width: xxxpx. For those on mobile browsers with a tiny 360px or smaller width, they will simply get the biggest possible size for your container that fits in their screen size (but then your inside layout will have to scale gracefully too.) Also of note is that max-width does not work on IE6.
The approach that you have outlined is the one that I use. I have been using it for several years and it hasn't let me down. I can't think of what the criticisms would be.
margin: 0 auto; is the best method for centering.
The author of article you reference stated that text-align: center; was required to support IE5/Win. I think you can safely ignore this as IE5 is well and truely dead.
I think this is a better work around.
This will center an entire page's content when contained within the div id="pagebox" of 600px wide.
body { text-align:center; min-width:600px; }
#pagebox { text-align:left; width:600px; margin-left:auto; margin-right:auto; }
Comments
Specify a min-width for the body as wide as the pagebox element itself.
This prevents negative (i.e inaccesible) left margins in narrow browser windows when using Navigator 6+/ Mozilla on Windows.
MSIE 5 doesn't center based on auto left/right margins, but "text-align:center" does center top divs.
Hope it helps
I find it a common practise to use margin: 0 auto; to centerise your element.
Also styling tags like <center> are deprecated in current version (HTML 4.01).
The best way to do this is indeed creating a div, say, 960px wide and giving it {margin: 0 auto;}.
What I also like to do is to give that div some {padding: 0 15px;}. This way the centered area is actually 990px which is still perfectly center-aligned in 1024x768 monitors whilst the padding provides a cushion in the edges for users using smaller monitors or Google Chrome.
And going a step further, I actually creater a wrapper div that just takes up the entire page and then center a content div inside it. This lets me take advantage of things like a footer that always sticks to the bottom of the screen regardless of content length (such as http://ryanfait.com/sticky-footer/).
Honestly, I just use the <center> tag. It's outdated, I suppose (and you get some complaints about it, probably depending on your doctype) but it works.
-- Edit
Well, the downvotes on this are reasonably predictable, but I do hope someone can outline exactly why (outside of pedanticness) this doesn't work; because it's my understanding it works in all browsers. I could be wrong :)
加载中,请稍侯......
精彩评论