如何将行和列放在一个部分的中心

Question

我正在学习 HTML 并且我正在从事这个项目，基本上我试图在 section 中显示 8 张图片，每行 4 张。为了解决这个问题，我查找了如何在不使用 Table 的情况下制作行和列（我不允许在这个项目中这样做）。我遇到了这个：

* {
  box-sizing: border-box;
}

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

<h2>Four Equal Columns</h2>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ddd;">
    <h2>Column 4</h2>
    <p>Some text..</p>
  </div>
</div>

我用这个技巧做了两行来解决我的问题。我将这两行放在 <section> 中，我自己创建了 gallery1:

.gallery1 {
    align-items: center;
    justify-content: center;
    margin: auto;
}

使用上面的代码，最终代码如下所示：

.whitetitle {
  color: white;
}

.green {
  background-color: #4AB19A;
}

.gallery1 {
  align-items: center;
  justify-content: center;
  margin: auto;
}

.gallery1 img {
  border: 1px solid whitesmoke;
  border-radius: 90px;
  margin: 15px;
  height: 150px;
  width: 150px;
}

.column {
  align-items: center;
  justify-content: center;
  float: left;
  display: flex;
  width: 20%;
  padding: 10px;
  margin: auto;
}

.row:after {
  content: "";
  display: table;
  clear: both;
  align-items: center;
  justify-content: center;
  margin: auto;
}

<section class=" green gallery1">

  <h2 class="whitetitle"> Graphic Designing </h2>


  <section class="row">
    <div class="column">
      <img src="https://i.imgur.com/yX7UIXh.jpg">
    </div>
    <div class="column">
      <img src="https://i.imgur.com/yX7UIXh.jpg">
    </div>
    <div class="column">
      <img src="https://i.imgur.com/yX7UIXh.jpg">
    </div>
    <div class="column">
      <img src="https://i.imgur.com/yX7UIXh.jpg">
    </div>
  </section>
  <section class="row">
    <div class="column">
      <img src="https://i.imgur.com/yX7UIXh.jpg">
    </div>
    <div class="column">
      <img src="https://i.imgur.com/yX7UIXh.jpg">
    </div>
    <div class="column">
      <img src="https://i.imgur.com/yX7UIXh.jpg">
    </div>
    <div class="column">
      <img src="https://i.imgur.com/yX7UIXh.jpg">
    </div>
  </section>
</section>

所以结果很好，但我有一个问题！我希望图片在水平和垂直方向居中。确切地说，我希望标题和两行都居中。

我尝试了以下方法

 align-items: center;
    justify-content: center;
    margin: auto;

在 CSS 的图库中，但没有用。有人可以帮我吗？ fix/avoid 这个我应该怎么办。

此外，我尝试了 flex-box 并将 display: flex; 放入图库中，但它在一行中显示了所有内容（标题和两行），这不是我想要的。

Answer 1

所有标有/* <-- */的行都是新的。

.whitetitle {
  color: white;
    margin-left: auto; /* <-- */
    margin-right: auto; /* <-- */
    text-align: center; /* <-- */
}

.green {
  background-color: #4AB19A;
}

.gallery1 {
  align-items: center;
  justify-content: center;
  margin: auto;
    display: flex; /* <-- */
    flex-wrap: wrap; /* <-- */
    align-items: center; /* <-- */
  justify-content: center; /* <-- */
}

.gallery1 img {
  border: 1px solid whitesmoke;
  border-radius: 90px;
  margin: 15px;
  height: 150px;
  width: 150px;
}

.column {
  align-items: center;
  justify-content: center;
  float: left;
  display: flex;
  width: 20%;
  padding: 10px;
  margin: auto;
}

.row::after {
  content: "";
  display: table;
  clear: both;
  align-items: center;
  justify-content: center;
  margin: auto;
}

<section class=" green gallery1">

  <h2 class="whitetitle"> Graphic Designing </h2>


  <section class="row">
    <div class="column">
      <img src="https://i.imgur.com/yX7UIXh.jpg">
    </div>
    <div class="column">
      <img src="https://i.imgur.com/yX7UIXh.jpg">
    </div>
    <div class="column">
      <img src="https://i.imgur.com/yX7UIXh.jpg">
    </div>
    <div class="column">
      <img src="https://i.imgur.com/yX7UIXh.jpg">
    </div>
  </section>
  <section class="row">
    <div class="column">
      <img src="https://i.imgur.com/yX7UIXh.jpg">
    </div>
    <div class="column">
      <img src="https://i.imgur.com/yX7UIXh.jpg">
    </div>
    <div class="column">
      <img src="https://i.imgur.com/yX7UIXh.jpg">
    </div>
    <div class="column">
      <img src="https://i.imgur.com/yX7UIXh.jpg">
    </div>
  </section>
</section>

Answer 2

因为你有两个部分，你可以简单地将它们包装成一个部分并给它 class 称为 main，然后对其应用 flex-box 集中化。

这是一个例子

.whitetitle {
  color: white;
}

.main {
  background-color: #4AB19A;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.green {
  text-align: center;
  background-color: #4AB19A;
}

.gallery1 {
  align-items: center;
  justify-content: center;
  margin: auto;
}

.gallery1 img {
  border: 1px solid whitesmoke;
  border-radius: 90px;
  margin: 15px;
  height: 150px;
  width: 150px;
}

.column {
  align-items: center;
  justify-content: center;
  float: left;
  display: flex;
  width: 20%;
  padding: 10px;
  margin: auto;
}

.row:after {
  content: "";
  display: table;
  clear: both;
  align-items: center;
  justify-content: center;
  margin: auto;
}

<section class="main">
  <section class=" green gallery1">
    <h2 class="whitetitle"> Graphic Designing </h2>
    <section class="row">
      <div class="column">
        <img src="https://i.imgur.com/yX7UIXh.jpg">
      </div>
      <div class="column">
        <img src="https://i.imgur.com/yX7UIXh.jpg">
      </div>
      <div class="column">
        <img src="https://i.imgur.com/yX7UIXh.jpg">
      </div>
      <div class="column">
        <img src="https://i.imgur.com/yX7UIXh.jpg">
      </div>
    </section>
    <section class="row">
      <div class="column">
        <img src="https://i.imgur.com/yX7UIXh.jpg">
      </div>
      <div class="column">
        <img src="https://i.imgur.com/yX7UIXh.jpg">
      </div>
      <div class="column">
        <img src="https://i.imgur.com/yX7UIXh.jpg">
      </div>
      <div class="column">
        <img src="https://i.imgur.com/yX7UIXh.jpg">
      </div>
    </section>
  </section>
</section>

或者你可以简单地用 grid-box 来实现它下面是一个例子

.whitetitle {
  color: white;
}

.green {
  background-color: #4AB19A;
  display: grid;
  text-align: center;
}

.gallery1 {
  align-items: center;
  justify-content: center;
  margin: auto;
}

.gallery1 img {
  border: 1px solid whitesmoke;
  border-radius: 90px;
  margin: 15px;
  height: 150px;
  width: 150px;
}

.column {
  align-items: center;
  justify-content: center;
  float: left;
  display: flex;
  width: 20%;
  padding: 10px;
  margin: auto;
}

.row:after {
  content: "";
  display: table;
  clear: both;
  align-items: center;
  justify-content: center;
  margin: auto;
}

<section class=" green gallery1">
  <h2 class="whitetitle"> Graphic Designing </h2>
  <section class="row">
    <div class="column">
      <img src="https://i.imgur.com/yX7UIXh.jpg">
    </div>
    <div class="column">
      <img src="https://i.imgur.com/yX7UIXh.jpg">
    </div>
    <div class="column">
      <img src="https://i.imgur.com/yX7UIXh.jpg">
    </div>
    <div class="column">
      <img src="https://i.imgur.com/yX7UIXh.jpg">
    </div>
  </section>
  <section class="row">
    <div class="column">
      <img src="https://i.imgur.com/yX7UIXh.jpg">
    </div>
    <div class="column">
      <img src="https://i.imgur.com/yX7UIXh.jpg">
    </div>
    <div class="column">
      <img src="https://i.imgur.com/yX7UIXh.jpg">
    </div>
    <div class="column">
      <img src="https://i.imgur.com/yX7UIXh.jpg">
    </div>
  </section>
</section>

如何将行和列放在一个部分的中心

How to put Rows And Columns in center of a Section

html

css

rows