ansaurus

Question

What is the best way to center a webpage's content using css?

Answer 1

A:

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 :)

Noon Silk 2010-01-07 02:21:59

I'm amazed at your ability to hold a grudge cletus :)

Noon Silk 2010-01-07 02:30:14

you just gone to the `no-no` zone of the webbies ;)

rockacola 2010-01-07 02:35:28

rock: Heh, It's pretty expected, I'm just a bit disappointed by the lack of logical reasoning (though that seems typically with the css fanatics :P)

Noon Silk 2010-01-07 02:36:24

I also down voted you ;) not for my support to css but by saying it's ok not to move forward (in terms of technical skills). Especially in webbie world, everyone is (still) in pain because lack of standardisation and enforcement.

rockacola 2010-01-07 02:40:52

@silky also, if you able to *compile* your homepage, your compiler will throw error on 'lack of DocType' and 'incorrect syntax in `<head>`. But that doesn't happen in web programming ;)

rockacola 2010-01-07 02:43:46

rock: only if your compiler was in strict mode. I just don't have much care, for web standards really :) (and that's not to say I don't do my best to meet them, when it's necessary [for accessibility, or otherwise]). It just seems to me there is no practical reason to not use the 'center' tag; the reasoning I've seen for it is not legitimate, IMHO. Clearly, though, 4 people disagree, but without evidence, that's pretty meaningless to me.

Noon Silk 2010-01-07 03:07:44

@silky I feel it is always bad practice to knowingly use depreciated *anything* (which `center` is as of HTML 4) in the programming/markup world. `center` is supported now, but may not be in future browsers. From a semantic point of view, CSS should be used for *presentation* and HTML for markup. By using `<center>` you are saying *how* to display the content instead of describing the content. Also, for reference: http://stackoverflow.com/questions/1798817/why-is-the-center-tag-deprecated-in-html ... And of course, I downvoted you :)

Doug Neiner 2010-01-07 03:22:21

Doug: Cheers for the reasoning :) (It's 'Deprecated' by the way, not 'Depreciated (like money)'). It's supported without a doctype spec, and I would expect it will remain that way (you'll need to opt-in to make it deprecated, I imagine). And the semantic argument is certainly one *type* of argument, but it has no value if the website itself is still fully accessible and so on and so forth (i.e. it's a personal preference).

Noon Silk 2010-01-07 03:35:53

*"It's supported without a doctype spec"* Not quite, without a doctype browser goes into quirk mode and renders differently depends on vendors. I think modern webbies would prefer sites to **crash** rather than **display anyway**.

rockacola 2010-01-07 03:46:21

rockacola: No doubt that's what they'd prefer, that's, to be perfectly honest, because they don't know the reason it is like it is now. They may not even have jobs :) And it *may* render differently on different browsers; it's still possible for it to be the same. Doctypes *aren't* required.

Noon Silk 2010-01-07 03:50:07

@silky "I expect it will remain that way" I agree its a pretty good guess, *but*, if you had to guess between a browser dropping support for a supported property or a deprecated (thanks :) element, I'd put my money on the deprecated element. I used to feel the same way as you about 2 years ago, then I read "Designing with Web Standards" by Jeffrey Zeldman, and really grasped the importance of standards and semantic markup. It was a steep learning curve, but in the end I feel I code faster/leaner sites because of it.

Doug Neiner 2010-01-07 03:50:48

Doug: I would guess the most likely thing is the group of people *determining* web standards don't agree, or the standard doesn't get accepted, or the standard doesn't get implemented properly by all browsers; it's for this reason you don't jump on the technology bandwagon when something first comes out; you give it a review and act cautiously. That's not the case here, but I do believe that's *more likely* then a deprecated item being dropped (when you're not even specifying that version of HTML for your document).

Noon Silk 2010-01-07 03:53:30

Answer 2

+2 A:

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.

Crast 2010-01-07 02:26:37

Answer 3

+2 A:

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.

stealthdragon 2010-01-07 02:27:19

Answer 4

+12 A:

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"&gt;

James Maroney 2010-01-07 02:27:30

+1 for mentioning the DOCTYPE. That's required (in IE at least).

cletus 2010-01-07 02:28:58

+1 Really nice answer James

Doug Neiner 2010-01-07 03:23:18

Answer 5

A:

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).

rockacola 2010-01-07 02:28:14

Answer 6

+1 A:

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.

AUSteve 2010-01-07 02:30:38

Answer 7

A:

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/).

Tom 2010-01-07 10:28:47

Answer 8

A:

I think this is a better work around

This will center an entire page's content when contained within the div "#pagebox
of 600px wide.

body{ text-align:center; min-width:600px; }
#pagebox{ text-align:left; width:600px; margin-left:auto; margin-right:auto;}

Comments

 MSIE 5 doesn't center based on auto left/right margins, but "text-align:center"
 does center top divs

 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

Hope it helps

joberror 2010-01-07 21:06:24

ansaurus

tags:

views:

answers:

What is the best way to center a webpage's content using css?

related questions