CSS 问题 - 在容器内居中浮动 div答案

【问题标题】：CSS problem - centering floating divs inside a containerCSS 问题 - 在容器内居中浮动 div
【发布时间】：2010-07-26 18:16:04
【问题描述】：

我在将一堆浮动 div 居中时遇到了一些问题。我已经搜索了很多（特别是here 和here），但我似乎遗漏了一些东西。我会发布我的代码，希望这里有人能看到问题所在......

我想要完成的是这些方面的事情

screenshot http://efredericks.net/layout.PNG

我目前看到的行为是一切都正常浮动，但被推到了左边。无论我做了什么，我似乎都无法将其置于中心位置。

我的外部容器在浏览器中正确居中，但内部没有。

HTML

<body>
  <!-- outer_container - centers for IE -->
  <div id="outer_container">

    <!-- container - wrapper for content -->
    <div id="container">

      <!-- header - logo : menu -->
      <div id="hdr">

        <div id="hdr_right">
          <h1><a href="#" id="lhome">logo</a></h1>
          <div id="menu">
          <ul>
            <li><a id="menu_i1" href="#">item 1</a></li>
            <li><a id="menu_i2" href="#">item 2</a></li>
            <li><a id="menu_i3" href="#">item 3h</a></li>
          </ul>
          </div> 
        </div>

        <div class="clear"></div>

      </div>
      <!-- /header -->

      <!-- main -->
      <div id="main">

        <!-- problem area here -->
        <div id="outer">
          <div class="inner">a</div>
          <div class="inner">b</div>
          <div class="inner">c</div>
          <div class="clear"></div>

          <div class="inner">a</div>
          <div class="inner">b</div>
          <div class="inner">c</div>
          <div class="clear"></div>
        </div>

      </div>
      <!-- /main -->

    </div>
    <!-- /container -->

  </div>
  <!-- /outer_container -->

</body>

CSS

* {
  margin: 0px;
  padding: 0px;    

  font-family: Tahoma, Arial, sans-serif;
  color: #888750;
}

img {
  border: 0px;
}

body {
  background: #000;
}

  margin: 0 auto;
  position: relative;
}

#hdr {
  background: #000;
  height: 99px;
}

#hdr_right {
  margin: 30px 2px 0px 0px;
  height: 75px;
  float: right;
}

#hdr img {
  float: left;
  border: 0px;
  margin: 5px 0px 0px 5px;
}

#hdr ul {
  margin-top: -10px; 
}

#hdr li {
  float: left;
  padding: 0px 5px;
}

#main {
  text-align: left;
  background: #333;
}

.clear {
  clear: both;
}

#outer {
    overflow: auto;
    padding: 5px;
    width: 790px;
    margin: 0 auto;
    text-align: center;
}
.inner {
    float: left;
    background: #181818;
    margin: 5px;
    width: 200px;
}

【问题讨论】：

你对“中心”的定义非常非常“具体”。通常，当您“居中”某物时，您会将一个盒子放在另一个盒子的中心。您要求自动将许多元素移动到您指定的位置，您真的可以称之为居中吗？或者，如果我误解了，您能否制作出您需要的实际图像？ 听起来，您可能只想使用inline-block 和text-align:center 而不是浮动。很难说，因为你没有展示你真正想要的理想的最终版本。
好的，我添加了我想看到的最终结果的快速 n 脏屏幕截图
您是否考虑过父元素上的inline-block 和text-align:center？
父元素是#outer 容器？是的，我实际上……它仍然继续向左移动

标签： html css

【解决方案1】：

据我了解，您希望div#main 中的 div 居中而不是稍微偏左？

如果是这种情况，那么您可以做很多事情，您可以将每个 div.inner 周围的边距增加到大约 30 像素：

.inner {
    float: left;
    background: #181818;
    margin:5px 30px;
    width: 200px;
}

或将 div#outer 的宽度减小到 630px（并删除 text-align，因为您并不真正需要它）：

#outer {
    overflow: auto;
    width: 630px;
    margin: 0 auto;
}

希望这就是你要找的东西！

【讨论】：