Question

我正在尝试创建一个HTML布局，我创建了许多元素，并在CSS中为它们提供了边框等。我试图让主要的'Wrapper'居中，因此这个元素内部的所有东西也都居中。

我已经尝试了所有东西，边缘，对齐，绝对等等，没有任何工作。我的住宿位于我页面的左上角。

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

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

如果有人能够阐明为什么我尝试过的任何事情都没有用，以及可能的解决办法是什么。

谢谢！

Answer 1

#divWrapper{
   margin-left:auto;
   margin-right:auto;
}

应该做的伎俩。

Answer 2

只需将margin: 0 auto添加到#divWrapper的内容：

例如，添加到您的CSS：

#divWrapper * {
    margin: 0 auto;
}

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

#divWrapper div {
    margin: 0 auto;
}

你可以在这里看到一个有效的演示＆gt; http://jsfiddle.net/gu7Sr/

另外，作为旁注，请尽量避免使用<br />来创建布局。它不会很好地扩展，你将来很难重新设计！

Answer 3

我认为这就是你想要的。链接：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;
}

Answer 4

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

margin:auto;

会自行完成这个伎俩。

Answer 5

严重的是，所有这些包装的重点是什么？就这样做：

body {width: 800px; margin: 0 auto; }

HTML布局居中

5 个答案: