Question

我的问题只是以div为中心。

目前，我只有一个简单的html文件。我不知道为什么margin: 0 auto无效。

这是我的html布局：

<style type="text/css">

#header {
    width: 100%;
    margin: 0 auto 20px auto;
    height: 50px;
    background-color: #0F6;

}
#navigation {
    width: auto;
    float: right;
        margin: 0 auto;
    display: inline-block;
}
#content {
    background-color: #936;
    margin: 0 auto;
    width: 960px;
    position: relative;
    min-width: 720px;
    max-width: 960px;
}
footer {
    background-color:#0F6;
    width: 100%;
    height: 200px;
}
body {
    background-image: url(images/dark_wall.png);
}

</style>
</head>
    <body>
<div id="header">
  <div id="navigation">This is the nav</div>
</div>

<div id="content">
<div id="content_top">
</div>
<div id="content_middle">
</div>
<div id="content_bottom">
</div>
</div>



<footer>
<div id="footer_div_1"><p>DIV #1</p>
</div>
<div id="footer_div_2"><p>DIV #2</p>
</div>
<div id="footer_div_3"><p>DIV #3</p>
</div>
</footer>



</body>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript">
$(document).ready(function() {
  var bodyHeight = $("body").height();
  var vwptHeight = $(window).height();
  if (vwptHeight > bodyHeight) {
    $("footer").css("position","fixed").css("bottom",0);
  }
});
</script>

<!– Add conditional for IE7 + 8 support –>   
<!–[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>

底部的jquery只是为了让我的页脚成为一个粘性的页脚，因为这是我学会使用的最简单的方法，可以解决最少的问题。

以下是我的外部css文件的内容

@charset "utf-8";
/* CSS Document */

body {
  min-width: 960px;
  background:url(../img/dark_wall.png);
}

html, body {
    margin: 0;
    border: 0;
    width: 100%;
    font-size: 100%;
    font-family: Impact, "Courier New";
}

#footer_div_1 {
    display: inline-block;
    width: 33%;
    text-align: center;
}

#footer_div_2 {
    display: inline-block;
    width: 33%;
    text-align: center;
}

#footer_div_3 {
    display: inline-block;
    width: 33%;
    text-align: center;
}

Answer 1

将div的div设置宽度居中，并将margin-left和marign-right设置为auto。

不要在该div中使用float属性，也不要使用display：inline;并显示：inline-block;在那个div

div id =“content”之间没有任何内容，因此div无需显示任何内容。只需为div id =“content”添加一些内容或设置高度。

div不会以保证金为中心：0 auto;

1 个答案: