中心在具有流体宽度

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 */ 
}