如何将浮动左侧的多个div居中？

Question

我需要一个图像库。因此它应该是响应。如果一行的图像太多，则应在下一行显示。 这就是我已经实施的。我现在的问题是，最后一行（例如，当它只有一个图像时）也是居中的。但它应该向左浮动。

我尝试了float:left，但这只会让所有东西都浮动而不再居中。

这是JSFiddle-Example。

如何将最后一张图片浮动？

HTML：

<div class="psAppWrapper">
    <div ng-repeat="app in applications track by $index" class="psAppTile">
        <img src="{{app.icon}}" class="psAppIcon"/>
        <p class="psAppTitle">{{app.title}}</p>  
    </div>
</div>

CSS：

.psAppIcon {
  width: 80px;
  height: 80px;
}

.psAppTitle {
  text-align: center;
}

.psAppTile {
  width: 80px;
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}

.psAppWrapper {
    width: 100%;
    text-align:center;
}

修改

当我添加浮动时，它看起来像这样：

红色的是psAppWrapper。在这里，您可以看到图像不居中。左边的空间比左边的空间少得多。空格应该是相同的。

Answer 1

此

.psAppWrapper {
    width: 100%;
    text-align:left; /* Changed this from text-align:center */
}

应该将最后一个元素对齐到左边。

Answer 2

如今，通过float: left;定位块项目被认为是不好的做法。您应该使用display: flex;以您喜欢的方式对齐块项目。对于最后一行，请使用flex-wrap: wrap;。所以你最终应该使用这个CSS：

.psAppTile {
    display: flex;
    flex-wrap: wrap;
}

You can find explanations and more information on display:flex; here.

但我认为你需要另一种技术，display: grid;可能会有所作为。我必须承认，我还没有将它用于布局。 [你可以在这里找到完整的指南。] [3]