使用flexbox水平居中多个图像

Question

我遇到的问题是当我向.images容器添加四个图像时justify-content:center,我应用于在页面上水平居中图像的属性不起作用.

然而,当我在.images容器内只有两个图像时,我将图像水平居中.

我已经能够找到一种解决方案,通过使用容器text-align上的属性水平居中图像.images.这感觉有点像黑客.

代码笔

HTML

<div class="proj_images">
    <div class="images">
        <img class="disp1" src="http://placehold.it/450x350.png" alt="">
        <img class="disp2" src="http://placehold.it/450x350.png" alt="">
        <img class="disp3" src="http://placehold.it/450x350.png" alt="">
        <img class="disp4" src="http://placehold.it/450x350.png" alt="">
    </div>
</div>

CSS

.proj_images{
    display: flex;
    width:100%;

}

.images{
 text-align:center;
}

Answer 1

除了您已有的解决方案外，您还可以display将.images元素的设置为flex，然后justify-content: center与 一起添加flex-wrap: wrap。

当您justify-content: center在.proj_images元素上设置时，这只是将子 flexbox 项目（这将是.images而不是后代img元素）居中。这就是为什么您需要在img元素的直接父级上设置这些属性/值（这样img元素本身就是 flexbox 项目）。

.images {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

<div class="proj_images">
  <div class="images">
    <img class="disp1" src="http://placehold.it/250x150.png" alt="">
    <img class="disp2" src="http://placehold.it/250x150.png" alt="">
    <img class="disp3" src="http://placehold.it/250x150.png" alt="">
    <img class="disp4" src="http://placehold.it/250x150.png" alt="">
  </div>
</div>