CSS问题 - 集中在一个容器内的浮动div

我正在集中一些浮动div的一些问题。我已经搜索了很多（特别是here和here），但我似乎错过了一些东西。我会后我的代码，并希望有人在这里可以看到的问题是什么？CSS问题 - 集中在一个容器内的浮动div

我想什么来完成是沿着这些线路

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

来源

2010-07-26 espais

你对“中心”的定义非常“特定”。通常当你将一个盒子放在另一个盒子的中间时，你要求自动将许多元素移动到你指定的位置，你真的可以称之为集中吗？或者如果我误解了，你能否对你需要的东西做一个真实的印象？它*听起来像你可能只想使用'inline-block'和'text-align：center'而不是浮动。很难说，因为你没有展示你真正想要的理想，最终版本。 – 2010-07-26 09:21:44

好吧，我添加了一个快速的n最终结果的截图，我希望看到 – espais 2010-07-26 10:16:50

你有没有在父元素上考虑过'inline-block'和'text-align：center'？ – 2010-07-26 10:18:14

从你想在div#main的div我明白了什么为中心，而不是关闭的稍偏左？

如果是这种情况，那么你可以做很多事情，你可以提高保证金的金额每div.inner各地的约30像素：

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

或减少div#outer宽度630像素（和删除文本 - 对齐，因为你不真的需要那个）：

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

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

来源

2010-07-26 09:52:55 Ryano

增加我的内部元素的边际工作得很好....谢谢！ – espais 2010-07-26 10:21:01

CSS问题 - 集中在一个容器内的浮动div

回答

相关问题