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

回答

相關問題