Internet Explorer CSS - Center Div

html css internet-explorer doctype

21,078

Solution 1

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.

Solution 2

You must also set

body {
    text-align: center;
}

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

Solution 3

Set margin and width :

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

21,078

Author by

John Wheal

I have a masters degree in Computer Engineering with Distinction. I have a particular interest in large scale distributed systems.

Updated on July 09, 2022

Comments

John Wheal almost 2 years
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.