CSS将元素重新集中在包裹上

我原以为这很简单，但事实证明这有点让人头疼。当用户调整浏览器大小并使其中一个（或多个）图像换行到下一行时，我试图使图像网格重新居中

我尝试过给网格包装器显示：inline block；它的父值为text align:center；但当元素换行到新行时，这不会使元素重新居中。谢谢你的帮助

查看我试图实现的目标视图
（来源：）

HTML:

您是否尝试过：

.child-wrapper{margin:0 auto;}

---

所以它保持在中心？它通常有效。

请将

float:left

添加到class

中。针对特定于不同浏览器/屏幕/设备大小的浏览器断点，投影缩略图

.project-thumbnail{
    float:left;
    border:2px solid black;
    min-width: 269px;
    max-width: 269px;
}

添加
页边距：0，自动到下面的类

.child-wrapper
{
    margin: 0, auto;
}

通过查看
PHP
代码，我了解到类名为
的
DIV
。项目缩略图
在
循环迭代过程中重复出现。
我发现了一个非常类似的问题，有两个函数式答案。一个使用JS，另一个使用占位符元素。两者都不是很漂亮，但它们似乎都解决了内联块空格换行的问题

这是我所能想到的最好的解决方案，只使用CSS，神奇的部分是@media查询。很明显，你必须做数学来适应你的情况



正文{
保证金：0；
}
.父包装器{
保证金：自动；
宽度：500px；
填充：5px0；
字号：0；
}
.儿童包装纸{
显示：内联块；
宽度：100px；
字体大小：16px；
}
.儿童包装器img{
最大宽度：100%；
高度：自动；
填充物：5px；
垂直对齐：顶部；
框大小：边框框；
}
@媒体屏幕和屏幕（最大宽度：499px）{
.parent包装{宽度：400px；}
}
@媒体屏幕和屏幕（最大宽度：399px）{
.parent包装{宽度：300px；}
}
@媒体屏幕和屏幕（最大宽度：299px）{
.parent包装{宽度：200px；}
}
@媒体屏幕和屏幕（最大宽度：199px）{
.parent包装{宽度：100px；}
}

为什么不
宽度：269px
？您需要在每个循环中放置
.child wrapper
，以便将其复制到每个子循环中。或给出
显示：内联块
到
。投影缩略图
并丢弃
。子包装器
根据您拥有的代码，您的屏幕截图不正确，最后一项应该在中间或几乎在中间。i、 e.@Adam-是的，doh！@尼科O-我想我以前试过，但会再试一次。@sdcr-视觉效果代表了理想的场景，其中被包装的缩略图仍然是左对齐的。“也许我需要添加另一个包装器？”伊恩·克拉克-这是我最近看到的最好的问题描述之一。它有一个问题陈述+描述+视觉+代码。问题和预期结果的完美组合。：）干杯：）谢谢。我试过了，但是运气不好。子包装器确实“收缩以适应”缩略图，但一旦缩略图包装到下一行，子div将占据父div的宽度。很抱歉，project thumbnail确实有一个float:left属性，我编辑了不必要的样式以保持问题清晰，并意外删除了该样式。我在页面顶部有一个线框视觉效果，让你感觉到我正在努力实现的目标。好的。很高兴看到您在发布代码之前关注清理代码。我很感激。还包括
边距：0自动到
.child wrapper
类？？？我试过了，但运气不好，现在（几乎）起作用的是旧的父文本：对齐中心和子显示：内联块技巧。但是，我的缩略图是以中心对齐的方式换行的。我希望它们是左对齐的。这听起来是实现这一目标的唯一正确方法：（我将尝试JS方式，并让您知道我是否可以让它工作。谢谢。我现在将尝试它。我可能会有一些断点，但它比不可见的占位符干净得多。我使用此解决方案，因为我可以在SASS中非常快地自动化它，并且不涉及额外的元素。谢谢。
.project-thumbnail{
    float:left;
    border:2px solid black;
    min-width: 269px;
    max-width: 269px;
}

.child-wrapper
{
    margin: 0, auto;
}