居中裝滿一個容器的容器

-1

我試過了各種邊距的組合：0自動，顯示，寬度等，我無法讓我的容器集中在屏幕上。我現在處於'擺弄到現在'的階段，但我已經沒有想法了。居中裝滿一個容器的容器

我有一個容器（一個div），其中包含6個div（可能會增加），每個包含一個餅圖。我希望這些圖表能夠集中對齊，並根據它們如何適應屏幕來分隔空間。例如，如果有3個寬的空間，我希望他們3寬2深，但水平集中。如果只有1個空間，那麼1個寬6個深，但仍然是水平集中的空間。

他們正確地排序自己，例如3 x 2或2 x 3，但他們被推上了左邊緣，我不知道如何集中他們。

我的CSS（不工作）在莫是：

#container { 
    margin : 0 auto; 
    display : inline-block; 
} 

#chart { 
    float : left; 
}

來源

2016-04-29 Farflame

你這個SO搜索？ http://stackoverflow.com/search?q=center+div+containing+divs – Rob

我確實搜索過，但您鏈接的頁面有一個我沒有閱讀過的解決方案。＃容器{ 寬度：100％; text-align：center; } #chart { display：inline-block; } – Farflame

可能重複的[水平居中div在div]（http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div） –

使用

display: block;

，而不是

display: inline-block;

來源

2016-04-29 19:04:54 Cameron637

#container { 
    text-align: center; 
} 

#chart { 
    display: inline-block; 
}

來源

2016-04-29 19:08:37 kloddant

謝謝，似乎是最簡單的解決方案，它的工作原理:) – Farflame

Flex擁有最能力這裏。

HTML：

<div class="container"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div>

CSS：

.container { 
    /* We first create a flex layout context */ 
    display: flex; 

    /* Then we define the flow direction and if we allow the items to wrap 
    * Remember this is the same as: 
    * flex-direction: row; 
    * flex-wrap: wrap; 
    */ 
    flex-flow: row wrap; 

    /* Then we define how is distributed the remaining space */ 
    justify-content: space-around; 
} 

.child { 
    display: inline-block; 
    height: 200px; 
    width: 200px; 
    margin: 5px; 
    border: 2px solid red; 
}

小提琴：https://jsfiddle.net/0rq78w7r/1/

CSS Tricks Flex

來源

2016-04-29 19:11:07 theblindprophet

居中裝滿一個容器的容器

回答

相關問題