CSS Centering

[Maljonic]

Is there a good trick to get a site to be centred the same as using align="center", so it slides back and forth nice and smoothly.

Padding and margins don't seem to do the same thing, you can centre your content but is doesn't slide smoothly.

I am talking about fixed widths here btw.

 

[JingleBells]

I (think I) usually use:

text-align: center;
margin: 0 auto;

 

[SheepCow]

Normally you use "text-align: center;" on the parent object, and "margin-left: auto; margin-right: auto;" on the one you want centered.

Jingle's above is the same as, but in shorthand:

margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;

 

[Shovel]

Note that the text-align:center on the parent element is only for Internet Explorer. All standards compliant browsers (and IE7 as well) respond to the "auto" value on margin.

Note also that the "auto" has to be on the margin, it doesn't work with padding, for example

Ben

 

[tRoG]

Does margin:auto; work with previous versions of IE if you use the XHTML 1.0 Strict doctype? I'm sure I remember hearing that somewhere, though how the XHTML doctype affects the CSS, I have no idea.

I get really irritated using text-align:center; - it seems like an ugly hack.

 

[Shovel]

Does margin:auto; work with previous versions of IE if you use the XHTML 1.0 Strict doctype? I'm sure I remember hearing that somewhere, though how the XHTML doctype affects the CSS, I have no idea.

Nope. Pretty certain it doesn't work at all. No version of IE understands XHTML so it won't make a difference. IE's "standards mode" only recognises the presence of _any_ DOCTYPE, not a specific HTML or XHTML one.

I get really irritated using text-align:center; - it seems like an ugly hack.

That's because it is. I recommend you ship it into a separate "IEHacks.css" file so you can keep it all organised (makes it easier to track problems when they "fix" things later too).

 

[tRoG]

Just knocked up a test for this. Seems to work using IE6. Anyone else care to try with other versions? http://snipurl.com/mk9f

(And if you're bothered, have a quick peek at the index.html file in that same dir. I've been helping them with a wee design update, and would appreciate any criticism.)

 

[Maljonic]

Thanks, I put the text align on the body tag and the margin auto on an overall content div to get it to work.

Had to put a couple of extra text-align lefts in to counteract the first center one though.

 

[SheepCow]

Just knocked up a test for this. Seems to work using IE6. Anyone else care to try with other versions? http://snipurl.com/mk9f

(And if you're bothered, have a quick peek at the index.html file in that same dir. I've been helping them with a wee design update, and would appreciate any criticism.)

This works fine in IE7, Opera and Firefox