居中一個包含未知數的浮動div的DIV

我讀過很多關於如何在另一個div中居中包含未知數的浮動div的未知寬度的div的帖子，但他們都假設包含的浮動div不包含流向多個行，或者他們不需要排成好的列。居中一個包含未知數的浮動div的DIV

假設此佈局：

<div class="container"> 
    <div class="box">content</div> 
    <div class="box">content</div> 

    ... many more (unknown number) of div.box ... 

    <div class="box">content</div> 
    <div class="box">content</div> 
</div>

其中div.box具有固定的高度/寬度，浮他們左使得它們很好地排隊，並填充可用空間作爲div.container的尺寸重新調整。但我想div.container居中。

如果我使用以下內容，div.box元素將全部排齊，div.container將很好地居中，但div的最後一行不會與其他行的左側對齊。他們將被集中，並在他們的專欄之外。

.container { 
    text-align:center; 
} 

.box { 
    display:inline-block; 
    width: 200px; 
    height: 200px; 
}

div.container的寬度是可變的，因此使用這樣的事情是不是一種選擇：

.container { 
    width: 1000px; 
    margin: 0 auto; 
} 

.box { 
    float: left; 
    width: 200px; 
    height: 200px; 
}

任何意見或建議？

來源

2013-06-26 Dom Day

你有任何圖像描述你的意思是什麼「排隊」？ –

如果您查看http://jsfiddle.net/DomDay/axUBx/，您會看到一個標準的float：left，當您調整窗口大小時，所有內容框始終排在網格中，最後一行向左浮動。這正是我想要的，除了我希望整個網格水平居中。使用這個簡單的float：left，margin就會在右邊增長，直到有另一個content box列的空間。 –

您可以使用box-sizing屬性將填充和邊框區域限制爲內容框的尺寸（例如，

* { 
box-sizing: border-box; 
-moz-box-sizing: border-box; 
}

http://jsfiddle.net/eNT2d/3/

來源

2013-06-26 07:09:46

嗨，我在想辦法改變盒子模型有助於解決這個問題。我錯過了明顯的東西嗎？ –

這裏的問題是，監守容器具有動態寬度 - margin: 0 auto將無法正常工作。

我們可以通過使用media queries來解決這個問題。

FIDDLE

因此，可以說每個盒子有200個像素的媒體查詢的寬度看起來像：

@media (min-width: 210px) { 
    ul{ 
     width: 200px; 
    } 
} 

@media (min-width: 410px) { 
    ul{ 
     width: 400px; 
    } 
} 
... 

...

現在，這是地方 - margin: 0 auto容器DIV就像上這應該。

來源

2013-06-26 07:17:15 Danield

這是一個很好的方法，並且如果知道在任何給定時間瀏覽器在容器的左側和右側佔用空間還有什麼是完美的，那麼這將是完美的。媒體查詢基於整個視口，對嗎？ –

是的，媒體查詢基於整個視口。如果您知道側邊欄的寬度，可以在媒體查詢中考慮這一點。 – Danield

我已經給了它一些想法，並且考慮到網站佈局是針對網站上的所有可列表數據類型（6且正在增長）實施的，其內容框尺寸因數據類型不同而不同，每個數據類型的預告，迷你和完整版本，媒體查詢方法的特殊情況編碼正在成倍增加。關於float：left grid的可愛之處在於，無論箱子大小和容器大小如何，它都不需要特殊情況。儘管你讓我看看媒體查詢。 +1。嘿 –

添加此

.container { 
    text-align:center; 
    margin: 0 auto; 
}

，並確保對容器父div有100％的寬度。

來源

2013-06-26 07:23:08

居中一個包含未知數的浮動div的DIV

回答

相關問題