中心在具有流體寬度

Question

父DIV浮動孩子的DIV我有以下HTML：

<div id="parent"> 
    <div class="child">Box1</div> 
    <div class="child">Box2</div> 
    <div class="child">Box3</div> 
    <div class="child">Box4</div> 
    <div class="child">Box5</div> 
    <div class="child">Box6</div> 
    <div class="child">Box7</div> 
    <div class="child">Box8</div> 
    <div class="child">Box9</div> 
    <div class="child">Box10</div> 
</div> 

下面CSS：

#parent { 
    display: inline-block; 
    max-width: 1000px; 
    height: 500px; 
    border: 1px solid #000000; 
    text-align: center; 
} 
.child { 
    width: 100px; 
    height: 100px; 
    border: 1px solid #000000; 
    margin: 10px; 
    float: left; 
} 

我想左浮動孩子的DIV和同時將它們放在沒有固定寬度的父DIV中。

我不想使用display：inline-block爲子DIVs的原因是，如果一行只有1或2個框，它們將居中，我希望它們與左對齊前一行中的框。

第二個原因是會使用ajax加載更多數據。所以，如果最後一行只有1或2個盒子，並且仍然可以容納更多盒子，它們將被插入到一個新行中，而不是被追加到最後一行。我不確定這一點，但我認爲使用display inline-block會發生什麼情況。浮動反而沒有這種行爲。

忘了提及父母應該顯示：inline-block，因爲另一個盒子會在它旁邊對齊。

我創建了一個搗鼓你一起玩： http://jsfiddle.net/6a2eqpmu/

Answer 1

只需添加margin: 0 auto;到#parent。當文檔寬度超過1000px時，這將使父div居中。

Answer 2

如果你的父元素沒有固定的寬度，你不能用他的子元素只用CSS。我認爲你必須編寫一些腳本來計算父寬度，每行寬度並設置適當的邊距和右邊距。

Answer 3

不幸的是，你無法使用純CSS來做到這一點。如果你願意使用一些JavaScript和jQuery的，你可以很容易地達到你想要的東西：

var parent = $('#parent'), 
    container = $('#container'), 
    children = container.children('.child'), 
    width = children.eq(0).outerWidth() + parseInt(children.eq(0).css('margin-left')) + parseInt(children.eq(0).css('margin-right')), 
    maxWidth = children.length * width; 

function resizeContainer() { 
    var newWidth = Math.floor(parent.width()/width) * width; 
    if (newWidth <= maxWidth && newWidth > 0) { 
     container.width(newWidth); 
    } 
} 

$(window).resize(resizeContainer); 

resizeContainer(); 

Example

Answer 4

的text-align適用於內聯元素。如果我理解你的問題，你應該刪除浮動並將這些框放在顯示中：inline-block。

事情是這樣的：http://jsfiddle.net/6a2eqpmu/7/

#parent { 
    max-width: 1500px; 
    height: 500px; 
    border: 1px solid #000000; 
    text-align: center; 
} 
.child { 
    width: 100px; 
    height: 100px; 
    border: 1px solid #000000; 
    margin: 10px; 
    display:inline-block; 
} 

我加入HTML註釋，以避免空白的問題，並提出的1500px一個最大寬度才能看到中心的框。

Answer 5

您可以添加看不見的佔位符您直列塊的結束。這將左對齊最後一行。

http://jsfiddle.net/aakt65x4/

如果您不填寫了第一排，整個事情就會出現左對齊。但我認爲這就是你想要的。

HTML：

<!-- 
    Centers a group of boxes that wrap to the width of its container. 
    Also left-aligns them inside the container. 
    Issue: Does not center group if there aren't enough boxes to fill 
    the first row. 
    --> 
<div class="container"> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 

    <!-- 
     How many placeholders do you need? 
     At least the number of blocks minus two. 
     --> 
    <div class="placeholder"></div> 
    <div class="placeholder"></div> 
    <div class="placeholder"></div> 
    <div class="placeholder"></div> 
    <div class="placeholder"></div> 
    <div class="placeholder"></div> 
    <div class="placeholder"></div> 
    <div class="placeholder"></div> 
</div> 

CSS：

body { 
    text-align: center;  /* center a max-width container */ 
    font-size: 0;   /* remove spaces between blocks */ 
} 
.container {    /* you don't need this */ 
    background-color: #eee; /* so you can see what's happening */ 
    max-width: 960px;  /* to demonstrate the centering of a max-width container */ 
    display: inline-block; /* center the max-width container */ 
    text-align: center;  /* center the group of blocks */ 
} 
.block { 
    display: inline-block; /* left-align within the group */ 
    background-color: red; /* so you can see what's happening */ 
    height: 100px; 
    width: 100px; 
    margin: 10px; 
} 
.placeholder { 
    display: inline-block; /* add to the line of blocks */ 
    width: 120px;   /* width + margin of a block */ 
}