html - 如何将多个div居中并向左浮动？

Question

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

我尝试了 float:left，但这只会让所有内容都向左浮动，不再居中。

这是一个 JSFiddle-Example .

如何让最后一张图片 float ？

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;
}

编辑

当我向左添加 float 时，它看起来像这样:

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

Answer 1

这个

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

应将最后一个元素向左对齐。