Problem centering div in IE8 with CSS_问答_开发者

开发者 https://www.devze.com 2023-01-17 08:30 出处：网络

basicaly I have the following HTML/CSS Layout HTML: <div id=\"container\"> <div id=\"main\">

相关专题：css

basicaly I have the following HTML/CSS Layout

HTML:

<div id="container">
    <div id="main">
 开发者_C百科       <h1>TEST</h1>
    </div> 
</div>

CSS:

#cont {
  width: 100%;
  background: #ddd;
}
#main {
  width: 900px;
  background: #fff;
  margin-left: auto;
  margin-right: auto;
}

This works fine in FF, safari, Chrome and Opera but IE8 still aligns the "main" div to the left.

Does anyone know what the problem might be? Thanks in advance.

You just need to change either the css #cont to #container or the id of the div to cont.

Works fine for me in IE8. http://jsfiddle.net/5M6X9/

did you define a doc type?

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

Futhermore get rid of the width: 100% on the first div and body must have padding: 0 and margin: 0

IE needs a correct DOC Type!

I always use

#main{
  margin:0 auto;
}

and the width:100% is not necessary.

replace 0 for top and bottom margins or

#main{
  margin:30px auto 0;
}

for just top-margin

Problem centering div in IE8 with CSS