父元素不在中心

Question

我的Html标记

<div id="main-wrapper">

            <div id="header-wrapper">
                <div id="header">
                                    </div><!--end of #header -->
                <div class="clear"></div>
            </div><!--end of #header-wrapper -->

            <div id="content-wrapper"><!-- this is closed in footer.php -->    <!-- main image with its map -->
    <img usemap="#homemap" class="map" src="http://rtcamp.com/wp-content/themes/rtcamp-new/img/home-main.png">

            <div class="clear"></div> <!--clear any float present at this point -->
        </div><!-- End of #content-wrapper -->

        <div id="footer-wrapper">

        </div><!--End of #footer-wrapper-->         
    </div>

使用CSS

body.view-home #main-wrapper {
height:100%;
}

#main-wrapper {
margin:0 auto;
width:960px;


}

body.view-home #header-wrapper {
height:auto !important;
margin:0 auto -555px;
min-height:100%;
}


body.view-home #content-wrapper {
display:block;
height:555px;
margin:0 auto;
overflow:hidden;
position:relative;
width:980px;
}

在所有浏览器中，例如firefox，chrome，主包装div显示在浏览器的中心，但在IE7中，主包装不会出现在中心。它显示在浏览器的左侧。

请帮帮我。

Answer 1

尝试以下风格：

body {
  text-align:center;
}

#main-wrapper {
  margin:0 auto;
  width:960px;
  text-align:left;
}