Internet Explorer CSS - Center Div

Question

I recently made a website but I'm having a really big problem with Internet Explorer. The CSS seems to do strange things in IE. Rather than copying hundreds of lines of CSS here is a link to a page of the site: http://www.appwheal.com/app/ios/angry-birds-space All the content should be displayed in the middle of the screen. Instead with IE it is stuck to the left.

I'm using

margin-left: auto;

margin-right: auto;

This is supported by IE, right.

Please help and thanks in advance.

possible duplicate of [Float a div to center](http://stackoverflow.com/questions/1740587/float-a-div-to-center) — Diodeus - James MacFarlane, May 15 '12 at 19:21

saluce · Accepted Answer · 2012-05-15T19:29:34.713

You need to declare a DOCTYPE, or Internet Explorer defaults to Quirks mode (IE5 compatibility). Go into Internet Explorer, hit F12 to bring up Developer tools, and notice that it shows "Quirks" mode under Document Mode. Quirks doesn't support any of the known div centering methods around, and declaring the DOCTYPE is the easiest (and recommended) way to fix it.

To set your page for XHTML 1.0 Transitional (which is the most common), use

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

To declare the page is HTML5 compatible, use

<!DOCTYPE html>

The DOCTYPE line needs to be the first line in the html file, appearing BEFORE the opening <html> tag.

Thanks, I feel silly that I forgot this. At least I didn't have to change loads of CSS. — John Wheal, May 15 '12 at 19:59

score 1 · Answer 2 · answered May 15 '12 at 19:20

1

You must also set

body {
    text-align: center;
}

#yourDiv {
    margin: 0 auto;
    text-align: left;
}

answered May 15 '12 at 19:20

Kristian

21,204
19
101
176

The DOCTYPE isn't set; IE is rendering the page in Quirks mode. – saluce May 15 '12 at 19:27
Yeah, if you change the document mode in the developer tools to IE7, it works perfectly without changing the CSS, so setting text-align: center in the body isn't necessary – saluce May 15 '12 at 19:34
OK, i'll give you that. but generally speaking, it is considered only half of the solution to set margin: 0 auto; there are plenty of tutorials that say for reliability's sake, you should include the other part (align center for body, align left for your wrapper) – Kristian May 15 '12 at 19:38

score 1 · Answer 3 · answered Feb 21 '13 at 06:49

1

Set margin and width :

#yourDiv {
  margin: 0 auto;
  width: 300px;
}

answered Feb 21 '13 at 06:49

user2094324

29
1

score 0 · Answer 4 · answered May 15 '12 at 19:22

0

You may use the old school text-align:center And try top:50%; left:50%; and offset suitable negative pixels

answered May 15 '12 at 19:22

Gang Su

1,187
10
12

Internet Explorer CSS - Center Div

4 Answers4