IE9 center div block

Question

Can somebody tell me how to make the work with IE9:

I am trying to make the "center" div to appear in the center.. It works fine with ff and chrome, but I have spend the last 1 hour trying to get it work with IE9. It keep going to the left!

The only way to make it work is by setting text-align to center on the parent container. Anybody knows any other way? More "proper"?

Thanks!

<html>
  <head>
    <style type="text/css">
      #center {
      width: 200px;
      border: 1px;
      margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div id="center">
      Hello World!
    </div>
  </body>
</html>
</code>

does setting `body { width: 100%; }` help? Might be that the `` width is same as `
`'s width and both getting left aligned. — Mridul Kashatria, Jul 04 '11 at 19:10
OK. Copying pasting the above and suddenly it works. Don't know why it was not working before. Maybe I had typo or most probably restarting IE/Windows helped.. Thanks everyone. — , Jul 04 '11 at 21:38

score 28 · Accepted Answer · answered Jul 04 '11 at 19:11

28

IE is notorious for not working without proper doctypes.

Try adding the HTML5 one

<!DOCTYPE html>

answered Jul 04 '11 at 19:11

Jason Gennaro

34,535
8
65
86

Oh man! Your answer was like the forbidden fruit for my problem. Many thanks! – Rishi Jul 27 '12 at 19:59
Note: I've just verified that the doctype declaration *must* be the first thing in your markup (as [recommended](http://validator.w3.org/docs/help.html#faq-doctype)) for it to work with IE9. – l0b0 Sep 05 '12 at 12:18

score 1 · Answer 2 · answered Jul 04 '11 at 19:11

1

View the fiddle: http://jsfiddle.net/xavi3r/bGyPN/

Try removing </code> what is it referring to ?

<div id="center">
    Hello World
</div>

#center
{
     width:200px;
     margin:0 auto;
     border:1px solid #CCC; 
}

answered Jul 04 '11 at 19:11

Xavier

8,244
18
54
85

Oh.. the was added while trying to copy paste my example here. – Jul 04 '11 at 21:41

IE9 center div block

2 Answers2