如何在 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

听起来您可能想要使用 flex 将图像并排放置。

在这种情况下，我会创建一个 gallery-wrapper div 来环绕您的所有 gallery div。您可以设置 gallery-wrapper 的样式以获得 flex，这将使它的子项默认并排排列。另外，添加 justify-content: center，使内容水平居中。看看这个 jsFiddle / my updated answer, and consider learning more about 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>

Answer 2

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

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

请参考这个link：https://jsfiddle.net/yudizsolutions/b2fq8dhr/

Answer 3

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

我给你点idea…………

水平居中

如果您使用 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

如何在 CSS 中将图片库居中？

How do I center an image gallery in CSS?

html

css

center

水平居中

垂直居中

水平和垂直居中。