容器內嵌塊的中心網格

Question

容器內有一組內嵌塊div。我希望這個div能夠形成一個合適的「表格式」網格，元素與左邊對齊，所以如果網格的最後一行將包含比其他元素更少的元素，網格將不會被破壞。

此外，網格本身需要相對於容器居中。

下面是說明我所需要的：http://note.io/157hjk1

最明顯的方法是把網格內包裝，包裝爲中心和包裝本身父容器內設置text-align: left。

但是，在這種情況下，包裝的寬度將不適合單個行中元素長度的總和，而是與容器的寬度相反。

通常的解決方案 - 爲包裝設置display:inline-block在這種情況下不起作用，可能是因爲包裝中的內嵌塊。

HTML

<div class="container"> 
    <div class="wrap"> 
     <div class="square">1</div> 
     <div class="square">2</div> 
     <div class="square">3</div> 
     <div class="square">4</div> 
     <div class="square">5</div> 
     <div class="square">6</div> 
     <div class="square">7</div> 
    </div> 
</div> 

CSS

.square { 
    width: 50px; 
    height: 50px; 
    background-color: red; 
    margin: 2px; 
    display: inline-block; 
} 

.wrap{ 
    border: 1px solid green; 
} 

.container{ 
    width: 250px; 
    border: 1px solid blue; 
    padding: 5px; 
} 

的jsfiddle我的代碼可以在這裏找到 - http://jsfiddle.net/prepin/gzB5k/

Answer 1

據我所知，沒有JS就無法做到這一點。問題在於「換行」元素。爲了居中（和它的內容），寬度最不是100％。但是，如果您設置固定寬度，則元素不再是流體。

因此，基本上只有當它沒有達到其父項的100％時，才能將「收縮包裝」效果的元素僅水平居中放置float:left或display:inline-block。一旦分解到第二行，它不再居中。

正如你可以從小提琴中的這個例子看到的，它不能完成。

小提琴：在CSS3使用Flex http://jsfiddle.net/gzB5k/4/

Answer 2

將這項工作：http://jsfiddle.net/gzB5k/3/

你可以用margin: 0 auto這個.wrap來居中。但是你需要設置它的寬度。如果你需要.wrap更寬，那麼只需使用另一個包裝div。像.inner-wrap

在這樣的網格上，我更喜歡使用浮動而不是內嵌塊。它表現更好。

Answer 3

檢查，如圖所示例子here有可能

：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

使用多個媒體查詢設定容器的寬度。見下面的例子。

然後，您可以用margin: 0 auto將容器居中。在.square元素上設置float:left;而不是display: inline-block。

@media (min-width: 500px) { 
    .wrap { 
    width: 500px; 
    } 
} 

@media (min-width: 750px) { 
    .wrap { 
    width: 750px; 
    } 
} 

+ for 1000px, 1250px, 1500px, 1750px 

在SASS你可以使用下面的代碼片段。

$block-width: 250px; 

.wrap { 

    width: $block-width; 

    @for $i from 1 through 14 { 
    @media (min-width : $block-width * $i) { 
    width: $block-width * $i; 
    } 
} 

Answer 5

如果您知道一行中的最大方格數，則可以在最近的瀏覽器（2013/2014）中完成。

使用彈性佈局，並添加max_squares_in_a_row - 1不可見的「方塊」，填補最後一行的空位置。

我更新了原有的片段：

.square { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: red; 
 
    margin: 2px; 
 
    display: inline-block; 
 
} 
 
.square.empty { 
 
    /* make "placeholders" invisible */ 
 
    height: 0; 
 
    /* padding: 0; */ 
 
    /* border: 0; */ 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
} 
 

 
.wrap{ 
 
    border: 1px solid green; 
 
     
 
    /* use flex layout here: */ 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
} 
 

 
.container{ 
 
    width: 250px; 
 
    border: 1px solid blue; 
 
    padding: 5px; 
 
}

<div class="container"> 
 
    <div class="wrap"> 
 
     <div class="square">1</div> 
 
     <div class="square">2</div> 
 
     <div class="square">3</div> 
 
     <div class="square">4</div> 
 
     <div class="square">5</div> 
 
     <div class="square">6</div> 
 
     <div class="square">7</div> 
 
     <!-- add (max squares in row - 1) empty placeholders: --> 
 
     <div class="square empty"></div> 
 
     <div class="square empty"></div> 
 
     <div class="square empty"></div> 
 
    </div> 
 
</div>