居中的 HTML 布局答案

【问题标题】：HTML layout centered居中的 HTML 布局
【发布时间】：2013-01-18 23:01:21
【问题描述】：

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

我已经尝试了所有方法，margin、align、absolute 等，但没有任何效果。我的住宿位于页面的左上角。

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

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

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

谢谢！

【问题讨论】：

我有一些不相关的学习点给你： 1. 你为什么要把<br> 放在所有这些元素之后，而它们已经默认是块级的？如果需要间距，请使用 CSS，而不是随机换行； 2.divHeader 不是一个好的id。 Header 会更好，不要以为 id 绑定到 div 现在它会随着您的页面/网站的开发而保留。
就您的实际问题而言：inc.heads.asp 中有什么？是否包含<DOCTYPE html> 在浏览器中触发标准模式？
@robertc - 我给每个
一个边框，当我在 IE 中查看它时，它们都聚集在一起，所以我只是添加了一个换行符将它们分开并有一点他们之间的空间。至于 inc.heads.asp，它包含我的 CSS 代码。
使用margin 将内容分开并在它们之间留出一点空间。如果所有 inc.heads.asp 包含的是 CSS，那么你所拥有的就是一个无效的 HTML 文档，它不起作用也就不足为奇了。 CSS，如果它在页面中，应该进入<head>。
如果您将标记和 CSS 放入有效文档中，似乎可以使用 exactly what it's supposed to do（我取出了 <br>s）。

标签： css layout html

【解决方案1】：

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

应该做的伎俩。

【讨论】：

问题不在于居中#divWrapper——他已经有了这个声明（尽管是组合形式：margin: 0 auto）。将内容居中是个问题！
边距：0 自动；会做同样的事情，所以没有有效的答案
好吧，margin: 0 auto 应该这样做，但不幸的是，它目前不起作用。

【解决方案2】：

只需在#divWrapper的内容中添加margin: 0 auto即可：

例如，添加到您的 CSS：

#divWrapper * {
    margin: 0 auto;
}

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

#divWrapper div {
    margin: 0 auto;
}

你可以在这里看到一个工作演示>http://jsfiddle.net/gu7Sr/

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案4】：

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

margin:auto;

会自己解决问题。

【讨论】：

会的，除非他需要独立于居中控制上下边距。

【解决方案5】：

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

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

【讨论】：