It seems that this week, everyone and their dogs are asking me why their layouts aren't centering properly (when using the "margin:0 auto" css rule). Here's a quick list of reasons:
- There's no doctype in the page. This causes IE to render in quirks mode. There are plenty of discussions on the web about why the quirks mode box model sucks, this is one of the reasons. Another variation of this is when there is an xml prolog on the page (the '<?xml version="1.0" ?>' stuff at the beginning of xml documents, which incidentally, also triggers quirks mode in IE. To fix it, add the doctype and remove the xml prolog.
- There's no width on the div. The element taking the margin rule must have a quantifiable width (i.e. anything valid that is not "auto").
- You have stray styles taking over. Open up the css inspector in Firebug and make sure that the div isn't floating (i.e. it must have no float rule, or have "float:none" applied to it) and that it's a block level element (i.e. it must have no display rule, or have "display:block" applied to it)
- The parent element is too narrow. Make sure you don't set the width of the parent to something smaller than the div you're trying to center.
And no, "margin:auto auto" does not center stuff vertically.
No comments:
Post a Comment