Html 在具有流体宽度的父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>

我想让子DIV向左浮动，同时使它们在没有固定宽度的父DIV中居中

我不想对子div使用display:inline块的原因是，如果一行只有1或2个框，它们将居中，并且我希望它们与前几行的框向左对齐

第二个原因是将使用ajax加载更多数据。因此，如果最后一行只有1或2个框，并且仍然可以容纳更多的框，则它们将插入新行，而不是追加到最后一行。我不确定这一点，但我认为当使用显示内联块时会发生什么。相反，Float没有这种行为

忘了提到父对象应该是display:inline块，因为它旁边将对齐另一个框

我为你制作了一把小提琴：

---

只需添加

边距：0自动到#父级。当文档宽度超过1000px时，这将使父div居中。
如果父元素没有固定的宽度，则不能仅使用CSS将其子元素居中。我认为您必须编写一些脚本来计算父宽度、每行宽度，并为它们设置正确的右边距和左边距。
不幸的是，您无法使用纯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();

var parent=$（'#parent'），
容器=$（“#容器”），
children=container.children（'.child'），
宽度=children.eq（0）.outerWidth（）+parseInt（children.eq（0）.css（'margin-left'））+parseInt（children.eq（0.css（'margin-right'）），
maxWidth=children.length*width；
函数resizeContainer（）{
var newWidth=Math.floor（parent.width（）/width）*宽度；
如果（新宽度0）{
容器宽度（新宽度）；
}
}
$（窗口）。调整大小（调整容器大小）；
调整容器大小（）；

文本对齐适用于内联元素。如果我理解您的问题，您应该移除浮点并将框放入display:inline块中

大概是这样的：

我添加了html注释以避免空白问题，并将最大宽度设置为1500px，以使方框居中。
您可以在内联块的末尾添加不可见的占位符。这将左对齐最后一行


如果不填充第一行，整个内容将显示为左对齐。但我想这就是你想要的

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>

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

问题是要对齐子对象，而不是父对象本身。这会起作用，但我完全忘记父对象旁边也有一个对齐的框，所以我必须为父对象使用显示内联块，这将使边距：0自动；什么也不做：）仔细阅读这个问题，作者不想把一切都放在中心，那是什么意思？“我想让子DIV向左浮动，同时将它们放在没有固定宽度的父DIV的中心。”我不太清楚：）我的错，我没有关注文本的其余部分。@Pete我去年处理过一个类似的问题，事实上，你需要一个JS辅助的解决方案。问题的关键是，一旦元素浮动，元素就不再计算父宽度的宽度。你有一个解决方案，你可以发布它。额外澄清为什么它不能用CSS单独完成：。容器居中，孩子们在容器内向左浮动，这一切都是应该的。。。但是如果一个子对象被碰撞到下一行，容器不会调整大小（变小），因为就容器而言，它的首选宽度仍然是一行上所有相邻子对象的宽度，我提出了一种纯css的方法来实现这一点，它使用了大量的媒体查询，但要求您知道有多少个框，并将其作为一个类应用于父容器（如果您的页面是fllat html，则使用一些服务器端代码或硬编码）：。看起来有很多css，但是如果你使用像sass这样的东西，写一个循环来覆盖这些样式会非常简单，在一个实时站点上，我猜框会比100px宽，所以你应该需要更少的查询
<!--
  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>

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