html - 如何在页面上将图片库居中？

Question

我正在尝试使用 HTML 和 CSS 创建图片库，但我在使图片库出现在页面中间时遇到了一些问题。截至目前，图像(图片中的灰色框)在左侧很远。我希望整个画廊都以页面为中心。 对此的任何帮助将不胜感激!

Screenshot

#content {
  overflow: auto;
  margin-top: 30px;
  margin-bottom: 30px;
  background-color: #6b88f2;
}

.gallery {
  min-height: calc(100vh - 200px);
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 1rem;
  background-color: #ec6e52;
}

.cell {
  margin: 0.5rem;
}

.cell img {
  display: block;
}

.responsive-image {
  max-width: 100%;
}

@media screen and (min-width: 600px) {
  .grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }
  .cell {
    width: calc(50% - 5rem);
  }
}

@media screen and (min-width: 1000px) {
  .cell {
    width: calc(33.3333% - 5rem);
  }
}

<div id="content">

  <div class="gallery">

    <div class="grid">

      <div class="cell">

        <img src="bilder/test.png" alt="OS" class="responsive-image">

      </div>
      <!--End cell  -->

      <div class="cell">

        <img src="bilder/test.png" alt="OS" class="responsive-image">

      </div>
      <!--End cell  -->

      <div class="cell">

        <img src="bilder/test.png" alt="OS" class="responsive-image">

      </div>
      <!--End cell  -->

      <div class="cell">

        <img src="bilder/test.png" alt="OS" class="responsive-image">

      </div>
      <!--End cell  -->

      <div class="cell">

        <img src="bilder/test.png" alt="OS" class="responsive-image">

      </div>
      <!--End cell  -->

      <div class="cell">

        <img src="bilder/test.png" alt="OS" class="responsive-image">

      </div>
      <!--End cell  -->

    </div>
    <!--End grid  -->

  </div>
  <!--End gallery  -->

</div>
<!--End content  -->

Answer 1

我只想将 text-align: center 放在 .grid 上，因为我知道它会逐渐下降

或者您可以使用 flexbox，这将使您总体上更轻松:

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