Html CSS问题-容器内浮动div居中_Html_Css

Html CSS问题-容器内浮动div居中

html css

Html CSS问题-容器内浮动div居中,html,css,Html,Css,我对一堆漂浮的潜水艇的定心有些问题。我已经搜索了很多次（特别是和），但我似乎遗漏了一些东西。我会发布我的代码，希望这里有人能看到问题是什么我想完成的就是这些方面的工作我目前看到的行为是，所有东西都正常浮动，但被推到左边。不管我做了什么，我似乎都不能把它放在中心我的外部容器在浏览器中正确居中，但内部什么都没有 HTML <body>  <div id="outer_con

我对一堆漂浮的潜水艇的定心有些问题。我已经搜索了很多次（特别是和），但我似乎遗漏了一些东西。我会发布我的代码，希望这里有人能看到问题是什么

我想完成的就是这些方面的工作

我目前看到的行为是，所有东西都正常浮动，但被推到左边。不管我做了什么，我似乎都不能把它放在中心

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

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>

据我所知，您希望

div#main

中的div居中，而不是稍微向左偏移

如果是这种情况，那么您可以做很多事情，您可以将每个

div.inner

周围的边距增加到大约30px：

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

或者将

div#outer

的宽度减小到630px（并删除文本对齐，因为您并不需要）：

希望这就是你想要的

你对“中心”的定义非常“具体”。通常，当你“居中”某物时，你将一个盒子放在另一个盒子的中间。你要求自动移动很多元素到你指定的位置，你真的能称之为居中吗？或者如果我误解了，你能对你需要的东西做出一个真实的形象吗？听起来您可能只想使用

内联块

和

文本对齐：居中

而不是浮动。这很难说，因为你没有展示出你真正想要的理想的最终版本。好吧，我添加了一个我想看的最终结果的快速n脏截图。你是否考虑过父元素上的

内联块

和

文本对齐：居中

？父元素是#外部容器？是的，事实上……它仍然继续向左边移动

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

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