Родительский элемент не в центре

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;
}