在响应式容器中居中缩略图网格答案

【问题标题】：Center A Grid Of Thumbnails Within Responsive Container在响应式容器中居中缩略图网格
【发布时间】：2016-05-13 13:35:35
【问题描述】：

我已经动态生成了缩略图，这些缩略图将被插入到一个流体宽度的容器中。缩略图的宽度/高度设置为 150 像素，边距为 5 像素。我希望瓦片在容器内水平居中，但我希望每个瓦片在彼此下方排列形成一个网格。

我编写了以下代码，但无法让缩略图在容器内居中。如果我删除float:left;，缩略图将居中，但缩略图不再排列在彼此下方以形成网格。

我将如何修改 CSS 以实现在流体宽度容器中居中的缩略图网格？

https://jsfiddle.net/bL7kfq5s/

<div class="wrapper">
  <div class="thumb"><img src="http://www.placehold.it/150x150"></div>
  <div class="thumb"><img src="http://www.placehold.it/150x150"></div>
  <div class="thumb"><img src="http://www.placehold.it/150x150"></div>
  <div class="thumb"><img src="http://www.placehold.it/150x150"></div>
  <div class="thumb"><img src="http://www.placehold.it/150x150"></div>
</div>

.wrapper {
  width: 600px; /* responsive width */
  background: yellow;
  text-align: center;
  overflow: hidden;
}

.thumb {
  display: inline;
  float: left;
  margin: 0 5px 5px;
  width: 150px;
}

【问题讨论】：

标签： html css

【解决方案1】：

请用此代码替换 .thumb

.thumb {
    display: inline-block;
    float: none;
    margin: 0 5px 5px;
    width: 150px;
}

【讨论】：

缩略图不再排列成网格。第 4 和第 5 个缩略图现在以容器为中心，而不是与上面的拇指对齐。
试试这个和平的代码以及上面的代码 .thumb:nth-child(1), .thumb:nth-child(4) { margin-left: 10%; }
Sukesh - 我没有看到任何事情发生。你能发一个小提琴吗？
如果我改变.container的宽度，网格会断裂

【解决方案2】：

您可以使用可以相对于主包装器设置宽度的子包装器，并在子包装器中浮动拇指，如下所示：

<div class="wrapper">
  <div class="subwrapper">
  <div class="thumb"><img src="http://www.placehold.it/150x150"></div>
  <div class="thumb"><img src="http://www.placehold.it/150x150"></div>
  <div class="thumb"><img src="http://www.placehold.it/150x150"></div>
  <div class="thumb"><img src="http://www.placehold.it/150x150"></div>
  <div class="thumb"><img src="http://www.placehold.it/150x150"></div>
</div>

.subwrapper {
  width: 480px;
  margin: auto;
}

https://jsfiddle.net/45sosd29/

【讨论】：