0

我正在尝试创建一个 HTML 布局，并且我已经创建了许多元素并在我的 CSS 中给它们一个边框等。我试图使主要的“包装器”居中，因此该元素内的所有内容也都居中。

我已经尝试了所有方法，边距、对齐、绝对等，但没有任何效果。我的住宿位于页面的左上角。

这是我的索引页面，其中的元素是：

<!--#include file ="inc.heads.asp"-->

<html>

<head>
</head>

<body>
 <div id ="divWrapper">
  <div id ="divHeader">
   <img src="Images/title.png">
   <br>
   <div id ="divNavBar">
    <br>
     <div id ="divContent">
     </div>
   </div>
  </div>
 </div>
</body>

</html>

这是我的CSS：

body {
 background-color: #300;
}

#divWrapper {
 margin: 0 auto;
 width: 800px;
}

#divHeader {
 width: 500px;
 border-style: inset;
 border-color: #COCOCO;
 background-color: #707070;
 padding: 5px;
}

#divNavBar {
width: 500px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 5px;
}

#divContent {
 float: left;
 width: 500px;
 border-style: inset;
 border-color: #COCOCO;
 background-color: #707070;
 padding: 5px;
}

如果有人可以阐明为什么我尝试过的所有方法都不起作用以及可能的解决方案是什么。

谢谢！

4

5 回答 5

0

我想这就是你想要的。链接：http ://codepen.io/anon/pen/Ihzxp

<body>
 <div id="divWrapper">
  <div id="divHeader">
   <img src="http://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Small.png">
   <div id="divNavBar">
     <div id="divContent">
       Stuff
     </div>
   </div>
  </div>
 </div>
</body>

和

body {
 background-color: #300;
}

#divWrapper {
 width: 100%;
}

#divHeader {
 width: 600px;
 border-style: inset;
 border-color: #COCOCO;
 background-color: #707070;
 padding: 5px;
margin: 5px auto;
 text-align:center;
}

#divNavBar {
width: 550px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 15px;
margin: 5px auto;
}

#divContent {
 width: 500px;
 border-style: inset;
 border-color: #COCOCO;
 background-color: #707070;
 padding: 5px;
 margin: 5px auto;
}
于 2013-01-18T14:48:56.157 回答
0

说真的，所有这些包装器的意义何在？只需这样做：

body {width: 800px; margin: 0 auto; }
于 2013-01-18T15:01:21.110 回答
0 
#divWrapper{
   margin-left:auto;
   margin-right:auto;
}

应该做的伎俩。

于 2013-01-18T14:21:45.733 回答
0

只需添加margin: 0 auto以下内容#divWrapper：

例如，添加到您的 CSS：

#divWrapper * {
    margin: 0 auto;
}

如果您只希望div元素居中，请使用：

#divWrapper div {
    margin: 0 auto;
}

您可以在此处查看工作演示 > http://jsfiddle.net/gu7Sr/

另外，作为一个侧面说明，尽量避免<br />用于创建布局。它不会很好地扩展，将来您将很难重新设计！

于 2013-01-18T14:23:10.990 回答
0

更多只是对 BenM 答案的评论，但我还没有评论的声誉。很确定只是：

margin:auto;

会自己解决问题的。

于 2013-01-18T14:54:02.193 回答