如何将行和列放在节的中心

debugcn 发表于 Dev

苏巴兹

我正在学习HTML，并且正在从事这个项目，基本上我想在其中显示8张图片section，每张图片中每行显示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中的Gallery内，但是没有用。有人可以帮我吗？我应该怎么做才能解决/避免这种情况。

另外，我尝试了一下flex-box并将其放到display: flex;Gallery中，但它却将所有内容（标题和两行）显示为一行，这不是我想要的。

牧师加德

由于您有两个部分，因此您可以将它们简单地包装到一个部分中，并给它提供类，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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。