在具有流体宽度的父 DIV 中居中浮动子 DIV答案

【问题标题】：Center floated child DIVs in a parent DIV that has fluid width在具有流体宽度的父 DIV 中居中浮动子 DIV
【发布时间】：2015-03-25 01:25:19
【问题描述】：

我有以下 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 中。

我不想对子 DIV 使用 display: inline-block 的原因是，如果一行只有 1 或 2 个框，它们将居中，我希望它们与框左对齐在前几行。

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

忘了提到父级应该是 display: inline-block 因为另一个框会在它旁边对齐。

我创建了一个小提琴供你玩： http://jsfiddle.net/6a2eqpmu/

【问题讨论】：

@Pete 我去年解决了一个类似的问题，确实，您需要一个 JS 辅助解决方案。问题的症结在于，一旦元素浮动，元素就不再影响计算父宽度的宽度。你有一个解决方案，你也可以发布它。

标签： html css

【解决方案1】：

很遗憾，您无法使用纯 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

【讨论】：

额外说明为什么不能单独使用 CSS：jsfiddle.net/6a2eqpmu/20。容器居中，孩子们漂浮在容器内，一切都应该如此......但是如果孩子被撞到下一行，容器不会调整大小（变小），因为就容器而言考虑到，它的首选宽度仍然是一行中所有相邻子项的宽度，这就是它调整到的大小。
我想出了一个纯 css 方法来做到这一点，它使用大量媒体查询，但需要你知道你有多少个盒子，并将它作为一个类应用到父容器（使用一些服务器端代码或硬编码，如果您的页面是扁平 html）：stackoverflow.com/questions/28876653/css-centering-dynamic-div/…。似乎有很多 css，但是如果您使用的是 sass 之类的东西，那么编写一个循环来覆盖这些样式会非常简单，并且在一个实时网站上，我猜这些框会比 100px 宽，所以您应该需要更少的查询

【解决方案2】：

只需将margin: 0 auto; 添加到#parent。当文档宽度超过 1000px 宽时，这将使父 div 居中。

【讨论】：

问题是要对齐孩子，而不是父母本身。
这会起作用，但我完全忘记了父级旁边还有一个对齐的框，所以我必须为父级使用显示内联块，这将使 margin:0 auto;什么都不做:)

【解决方案3】：

如果您的父元素没有固定宽度，则您不能仅使用 CSS 将其子元素居中。我认为您必须编写一些脚本来计算父宽度、每行宽度并为它们设置正确的边距右和边距左。

【讨论】：

【解决方案4】：

text-align 适用于内联元素。如果我理解您的问题，您应该删除浮动并将框放在 display: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 cmets 以避免空白问题，并设置了 1500 像素的最大宽度以查看居中的框。

【讨论】：

仔细阅读问题，作者不想把所有东西都放在中心
那是什么意思？ “我想将子 DIV 向左浮动，同时将它们放在没有固定宽度的父 DIV 中。”这对我来说不是很清楚:)
我的错，我没有专注于文本的其余部分。

【解决方案5】：

您可以在 inline 块的末尾添加不可见的占位符。这将使最后一行左对齐。

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

【讨论】：