在容器内水平对齐 3div答案

【问题标题】：Aligning 3divs horizontally within a container在容器内水平对齐 3div
【发布时间】：2014-05-08 06:48:56
【问题描述】：

如何在 css 中水平对齐 div 容器并在其中包含 3 个 div？看我的概念：http://postimg.org/image/9el748gst/

   <div id="container">
           <div id="header"> HEADER </div>
           <div id="content"> CONTENT </div>
           <div id="footer"> FOOTER </div> 
   </div>

抱歉，如果我重复发布，我只是找不到正确的方法来执行此操作。谢谢！

【问题讨论】：

如果您在#container 上有固定宽度，那么只需添加margin:0 auto 使其水平居中 - example
也可以使用text-align:center 来保持浏览器的中心。

标签： html css alignment containers center

【解决方案1】：

大致上你可以使用这样的东西

演示：http://jsbin.com/zuxunavi/1/

HTML：

<div id="container">
  <div id="header"> HEADER </div>
  <div id="content"> CONTENT </div>
  <div id="footer"> FOOTER </div> 
</div>

CSS：

#container{
  min-height:100px;
  height:auto !important;
  width:100%;
  margin:0 auto;
  background:#CCC;
  padding:5px;
  overflow:auto
}

#header{
  height:50px;
  background:#FF0000;
  width:95%;
  margin:2.5%;
}
#content{
  height:200px;
  background:#25AAE2;
  width:95%;
  margin:2.5%;
}

#footer{
  height:50px;
  background:#8CC63E;
  width:95%;
  margin:2.5%;
}

您可以将此作为参考来开发您自己的 html 页面。希望这会有所帮助。

【讨论】：

你为什么要浮动这些元素？
@Vucko：移除浮动。我认为它可能会破坏对齐方式。现在测试了..
谢谢，真的很有帮助！