如何在 CSS 中居中图片库？

Question

我已经创建了一个图片库，但我不确定如何将图片在页面中间水平和垂直居中。

 <div class="gallery">
     <a target="_blank" href="Icon_pyro.jpg">
      <img src="Icon_pyro.jpg" alt="Pyro" width="256" height="256">
     </a>
   <div class="desc">Pyro</div>
 </div>

我的 CSS 类是

div.gallery {
    display: block;
    margin: 0 auto;
    text-align: center;
  }

  div.gallery img {
    margin: 5px;

  }

它显示在顶部，我很难将它们并排放置

Current webpage

Answer 1

您可以使用display:flex 属性来解决您的问题。

我会给你一些想法............

水平居中

如果您使用display:flex;，所有div 元素都显示为行。然后，如果您使用justify-content:center;，您的行元素将水平居中。

.html

<div class="imageContainer">
  <div class="img">
    <img src="https://via.placeholder.com/256x256">
  </div>
  
  <div class="img">
     <img src="https://via.placeholder.com/256x256">
  </div>
  
  <div class="img">
    <img src="https://via.placeholder.com/256x256">
  </div>
</div>

.css

.imageContainer{
  display:flex;
  justify-content:center;
}

.img{
  margin:5px;
}

jsFiddle example

垂直居中

您只需添加align-items: center; 和min-height: 100vh;

  .imageContainer{
      display: flex;
      align-items: center;
      min-height: 100vh;
   }

jsFiddle Example

水平和垂直居中。

只需添加（这里有上述两个 css 属性。看看并得到想法）

.imageContainer{
   display:flex;
   justify-content:center;
   align-items:center;
   min-height:100vh;
}

jsFiddle Example

除了检查下面的示例，它还将向您展示如何垂直和水平居中列项目（刚刚添加flex-direction:column;）

.imageContainer{
   display:flex;
   align-items:center;
   min-height:100vh;
   flex-direction:column;
   justify-content:center;
}

jsFiddle Example

Here is the tutorial if you want to follow and get some idea about flex

Answer 2

你能检查一下下面的代码吗？希望它对你有用。

您必须为所有 gallery 元素添加一个父元素，并将 flex 实用程序属性赋予该父元素。您需要根据要求设置图库父元素的高度（目前我们已经为下面的演示设置了视口高度）。

请参考此链接：https://jsfiddle.net/yudizsolutions/b2fq8dhr/

Answer 3

听起来您需要使用flex 包装图像以将它们并排放置。

在这种情况下，我会创建一个 gallery-wrapper div 来包裹您的所有 gallery div。您可以设置gallery-wrapper 的样式以获取flex，这将使其默认并排为子级。另外，添加justify-content: center，以水平居中。查看此jsFiddle/我的更新答案，并考虑了解更多有关Flexbox 样式的信息 - 这是最好的。

.gallery-wrapper {
  display: flex;
  justify-content: center;
}

<body>
<div class="gallery-wrapper">
  <div class="gallery">
    <a target="_blank" href="Icon_pyro.jpg">
      <img src="Icon_pyro.jpg" alt="Pyro" width="256" height="256">
    </a>
    <div class="desc">Pyro</div>
  </div>
          
  <div class="gallery">
    <a target="_blank" href="Icon_scout.jpg">
      <img src="Icon_scout.jpg" alt="Scout" width="256" height="256">
    </a>
    <div class="desc">Scout</div>
  </div>
          
  <div class="gallery">
    <a target="_blank" href="Icon_spy.jpg">
      <img src="Icon_spy.jpg" alt="Spy" width="256" height="256">
    </a>
    <div class="desc">Spy</div>
  </div>
          
  <div class="gallery">
    <a target="_blank" href="Icon_soldier.jpg">
      <img src="Icon_soldier.jpg" alt="Soldier" width="256" height="256">
    </a>
    <div class="desc">Soldier</div>
  </div>
</div>
</body>