使用flexbox水平居中多个图像 [英] Centering multiple images horizontally with flexbox

问题描述

我遇到的问题是当我向 .images 容器中添加四个图片 justify-content：center 属性，我申请将图像水平放在页面中央不工作。

但是，当我在 .images 容器中只有两个图像时，

我已经能够找到一个解决方案，通过使用 text-align 属性在 .images 容器上。这感觉有点像一个黑客。

CODE笔

HTML

 < div class =proj_images > 
< div class =images> 
< img class =disp1src =http://placehold.it/450x350.pngalt => 
< img class =disp2src =http://placehold.it/450x350.pngalt => 
< img class =disp3src =http://placehold.it/450x350.pngalt => 
< img class =disp4src =http://placehold.it/450x350.pngalt => 
< / div> 
< / div> 
  

CSS

  .proj_images {
 display：flex; 
 width：100％; 
 
} 
 
 .images {
 text-align：center; 
} 
  

解决方案

已经有，您还可以将 .images 元素的显示设置为 flex ，然后添加 justify-content：center 以及 flex-wrap：wrap p>



在 .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 =disp1src =http://placehold.it/250x150.pngalt => < img class =disp2src =http://placehold.it/250x150.pngalt => < img class =disp3src =http://placehold.it/250x150.pngalt => < img class =disp4src =http://placehold.it/250x150.pngalt => < / div>< / div>  

The issue I'm encountering is when I add four images to the .images container the justify-content:center property which I am applying to center up the images horizontally on page does not work.

However when I only have two images inside the .images container I get the images horizontally centered.

I've been able to find a solution to centering the images up horizontally by using the text-align property on the .images container. This feels slightly like a hack though.

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

解决方案

Aside from the solution that you already have, you could also set the display of the .images element to flex, and then add justify-content: center along with flex-wrap: wrap.

When you set justify-content: center on the .proj_images element, that was only centering the children flexbox items (which would be .images and not the descendant img elements). Which is why you would need to set those properties/values on the direct parent of the img elements (so that the img elements themselves are flexbox items).

.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>

这篇关于使用flexbox水平居中多个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！