Html 将可变宽度栅格居中，同时将其元素向左对齐

考虑以下几点

<div class="container">
     <div class="grid">
         <div class="unit"></div>
         <div class="unit"></div>
         <div class="unit"></div>
         <div class="unit"></div>
         <div class="unit"></div>
         <div class="unit"></div>
          ....
      </div>
</div>

....

使用图像，基本上我得到的是这样的东西

如您所见，绿色块和容器向左对齐

我想要的是这样的东西

.unit

元素具有恒定的宽度

.grid

元素应随宽度扩展（以便更多的

单元

元素可以放入一行），同时始终位于

.container

的中心

任何关于如何仅使用CSS（必要时还可以使用一些html包装器）实现这一点的线索？

在CSS中，请确保： 1.在

.grid

规则中，

文本对齐

设置为

居中

---

2.在

.unit

规则中，

显示

设置为

内联块

。

div

元素是块级元素，因此每个新元素都显示在新行上。将

display

属性的值设置为

inline block

会强制将所有带有class

unit

的

div

显示在同一行上（直到没有更多空间为止）。另外，

text align:center

不适用于显示属性设置为

block

的元素，默认情况下，块级元素的显示值为

block

。

您只需像这样给类赋值

.grid { text-align:center; }

.unit { display:inline-block; }

我希望这能解决你的问题

---

如果没有，请通过JSFIDLE显示您的完整代码。

首先让我说这是一个有趣的问题，我的第一个想法是flexbox是解决这个问题的方法。我已经尝试过各种flexbox安排，但这种类型的解决方案让我无法实现。下面是使用浮动、清除和媒体查询的解决方案

对于本例，我假设每行至少有3个且不超过9个框。但是，您可以将此解决方案扩展到处理1到9个以上的框

以下是HTML：

<div class="grid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

取消了

.container

块，因为

.grid

显示为表格。后者是一个围绕其子对象收缩的块，可以应用

margin:0 auto

使其在页面上居中。330px的

.grid

最小宽度

确保每条线至少可以容纳三个块。每当在
表
元素中发生浮动时，其边距不会折叠，因此无需明确清除浮动（例如，通过clearfix）

每个
.grid
div
子级占用110px的水平空间（100px宽度+10px左右边距）。此数字对于以下媒体查询代码非常重要：

@media screen and (min-width: 330px) and (max-width: 439px) {
    .grid > div:nth-of-type(3n + 1) {
        clear: left;
    }
}

@media screen and (min-width: 440px) and (max-width: 549px) {
    .grid > div:nth-of-type(4n + 1) {
        clear: left;
    }
}

@media screen and (min-width: 550px) and (max-width: 659px) {
    .grid > div:nth-of-type(5n + 1) {
        clear: left;
    }
}

@media screen and (min-width: 660px) and (max-width: 769px) {
    .grid > div:nth-of-type(6n + 1) {
        clear: left;
    }
}

@media screen and (min-width: 770px) and (max-width: 879px) {
    .grid > div:nth-of-type(7n + 1) {
        clear: left;
    }
}

@media screen and (min-width: 880px) and (max-width: 989px) {
    .grid > div:nth-of-type(8n + 1) {
        clear: left;
    }
}

@media screen and (min-width: 990px) {
    .grid > div:nth-of-type(9n + 1) {
        clear: left;
    }    
}

代码背后的基本原理是：如果有足够的空间，每行仅包含n个块，则清除第（n+1）个块的左边缘，从而将块移动到新行

还有一把小提琴：。调整预览窗口的大小以查看调整。
@DRD的答案很好，但需要大量的媒体查询。但是，如果以下情况使你的船漂浮：不要看得太远，因为这很简单：在你的容器上设置一个左/右填充物

.grid {
  padding: 0 5%;
}

当宽度不是
.unit
整个框（填充、边距、边框、宽度）的乘积时，您会注意到空格不是偶数。在这里，设置基于%的宽度会有所帮助

有关测试用例，请参见。我添加了一点Javascript来动态调整填充，删除它以查看CSS唯一的结果编辑：@DRD创建了一个比我的JS更好的jQuery函数，请看（如果您想使用它，请不要忘记包含jQuery）。
解决方案似乎与这里类似

首先，将
.grid
设置为
inline
，然后添加更多高度为
的div:0
就可以了，额外div的数量至少应等于1行中的最大
单元数（减1）

这有点失禁，但仍然比@DRD建议的定义多个
@media
容易，并且不需要javascript/window.resize（）处理


.集装箱{
显示：块；
文本对齐：居中；
}
.空的{
高度：0！重要；
}
.电网{
显示：内联；
}

我仍然希望有一个更好的解决方案，只使用css，而不使用css，这很难说。这是由您的浮动引起的。当您使用浮动时，没有简单的方法将子容器置于父容器的中心。如果容器为固定宽度，则可以添加
边距：0 auto使容器本身居中。有趣的问题。我没有做任何浮动。。边距不起作用，因为如果我将
网格
设置为
块
，则无法将
单元
居中，如图所示，这实际上解决了问题，但问题不是一般性的。假设我在一行中有20个块，或者更多，屏幕宽度是我不想依赖的条件，我们都必须在一定的限制范围内工作。考虑到您的请求的具体情况-CSS唯一的解决方案，它将
.grid
集中在一个容器中，该容器的长度刚好足以完美地收缩包装流向左侧的固定大小的块-这是我能想到的最好的解决方案。干杯。下面是我与@Tyblitz对话的一个产品，这是一个使用jQuery的通用解决方案：。似乎不需要jQuery，只需添加尾随空元素就可以了。
.unit
的大小和用户浏览器的宽度将影响您需要多少尾随空元素。这肯定需要一些好的ole代码。
.grid {
  padding: 0 5%;
}

<div class="container">
    <div class="grid">
        <div class="unit"></div>
        <div class="unit"></div>
        <div class="unit"></div>
        <div class="unit"></div>
        <div class="unit"></div>
        <div class="unit"></div>
        <div class="unit empty"></div>
        <div class="unit empty"></div>
        <div class="unit empty"></div>
        <div class="unit empty"></div>
        <div class="unit empty"></div>
        <div class="unit empty"></div>
        <div class="unit empty"></div>
    </div>
</div>


.container {
   display: block;
   text-align: center;
}

.empty {
   height: 0 !important;
}

.grid {
   display: inline;
}