Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

margin-left: auto; margin-right: auto; in IE



4:27 pm on Dec 15, 2008 (gmt 0)

5+ Year Member

when i do margin-left: auto; margin-right: auto; in IE it doesnt center the container, but it does in FF, safari, etc. is there something im missing that i need to add?


5:11 pm on Dec 15, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

I'm pretty sure the container needs a width and the body needs to have text-align:center...


7:51 pm on Dec 15, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

As far as I know it's mainly an issue with IE6, not so much with IE7. And then mostly when you have it in quirksmode.

The need for a reduced width is rather universal as on block elements as they otherwise take up all the available width

The "hack" to give the parent text-align:center and the element itself text-align: left is only needed when you have IE6 in quirksmode in my experience.

To avoid quirksmode: use a full doctype and no xml preamble if you use xhtml ...


7:14 am on Dec 16, 2008 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

At the risk of repeating myself:

The issue with margin:0 auto; was legacy browsers like ie5.5 and below.

ie6 and above supports auto margins. This requires a block element with a width set to less than 100%. (Otherwise block elements expand full width and there is no "centering" effect.)

text-align:center set on the parent element is a technique for older browsers who would apply this to child elements as well as text. That includes ie5.5 and below, and is required for ie6 if the coder chooses to code in "quirks mode".

Once text-align:center has been set on a parent element the alignment must be re-set (usually to text-align:left) on relevant child elements because alignment should be (and is) cascaded/inherited by conforming browsers.

These are not hacks.

tr8er8, I strongly recommend you avoid quirks (and/or "almost standards") modes - they belong to a time when coders were trying to move their code from the era of proprietory html/css/javascript to conforming to a single set of recommendations that browser manufacturers were implementing fairly randomly. (Don't get me started on a history of Opera)

Avoiding quirks/almost standards is achievd via doctype selection. FAQ: Choosing the best doctype for your site [webmasterworld.com] in the forum library and the first two links in the "reference" section explain how to choose. Maybe also check out the companion Why most of us should NOT use XHTML [webmasterworld.com]

If you're not familiar with the characteristics of block/inline elements (easy and really helps) check out w3.org, and maybe g* blooberry (old but still accurate).


4:27 pm on Dec 16, 2008 (gmt 0)

5+ Year Member

thank you ill try it out, and also, im using just regular html/php :D

Featured Threads

Hot Threads This Week

Hot Threads This Month