html - 使用 flexbox 将多个图像水平居中

Question

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

但是，当我在 .images 容器中只有两张图片时，我会将图片水平居中。

通过使用 .images 容器上的 text-align 属性，我找到了使图像水平居中的解决方案。不过，这感觉有点像 hack。

CODE PEN

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

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

当您在 .proj_images 元素上设置 justify-content: center 时，这只会使子 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>