flexbox 的 CSS 文本定位问题 - 文本未正确居中对齐

Question

我有一个section，它有一个div，其display 属性为flex，在div 内还有7 个div，包含图片和文字。最终输出如下所示：

我希望文本以这样一种方式对齐，它们都从同一水平轴开始，我该如何解决？

这是我的代码：

/* Why Choose Section */

#Why_choose {
  background-color: black;
  padding-top: 5rem;
  padding-bottom: 2.5rem;
}

#Why_choose h1,
h2,
p {
  color: white;
  text-align: center;
}

#Why_choose h2 {
  width: 13rem;
  font-weight: 400;
  font-size: 1rem;
  margin-top: 2rem;
}

#Why_choose h1 {
  font-size: 5rem;
  /* padding-top: 5rem; */
}

#Why_choose img {
  width: 50%;
}

.red-box {
  background-color: red;
  width: 8rem;
  height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3rem;
  position: relative;
  margin: 0;
}

.big-box {
  transition: transform 100ms ease;
  height: 100%;
}

.big-box:hover {
  transform: scale(1.2);
}

#Why_choose .wrapped_container {
  display: flex;
  align-items: stretch;
  justify-content: center;
  position: relative;
  margin: 7rem 0 4rem 0;
}

#Why_choose .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#Why_choose hr {
  width: 100%;
  position: absolute;
  top: 4rem;
  z-index: -1;
}

#Why_choose a {
  position: absolute;
  height: 8rem;
  width: 8rem;
  z-index: 100;
  opacity: 0;
  text-decoration: none;
}

<section id="Why_choose">
  <h1>why snap smile?</h1>
  <div class="wrapped_container">

    <hr>
    <div class="customized container">
      <div class="big-box">
        <div class="red-box">
          <a href="https://www.google.com/" target="_blank"></a>
          <img src="images/why-choose-img/customized.png">
        </div>
      </div>
      <h2>CUSTOM MADE</h2>
    </div>

    <div class="home container">
      <div class="big-box">
        <div class="red-box">
          <a href="https://www.google.com/" target="_blank"></a>
          <img src="images/why-choose-img/home_support.png">
        </div>
      </div>
      <h2>WE WORK FROM HOME</h2>
    </div>

    <div class="conserve container">
      <div class="big-box">
        <div class="red-box">
          <a href="https://www.google.com/" target="_blank"></a>
          <img src="images/why-choose-img/comfortable.png">
        </div>
      </div>
      <h2>CONSERVES NATURAL TEETH</h2>
    </div>

    <div class="pain container">
      <div class="big-box">
        <div class="red-box">
          <a href="https://www.google.com/" target="_blank"></a>
          <img src="images/why-choose-img/pain-free.png">
        </div>
      </div>
      <h2>PAIN FREE AND REMOVABLE</h2>
    </div>

    <div class="delivery container">
      <div class="big-box">
        <div class="red-box">
          <a href="https://www.google.com/" target="_blank"></a>
          <img src="images/why-choose-img/instant-delivery.png">
        </div>
      </div>
      <h2>INSTANT DELIVERY</h2>
    </div>

    <div class="affordable container">
      <div class="big-box">
        <div class="red-box">
          <a href="https://www.google.com/" target="_blank"></a>
          <img src="images/why-choose-img/affordable.png">
        </div>
      </div>
      <h2>UNDER YOUR BUDGET</h2>
    </div>

    <div class="eat container">
      <div class="big-box">
        <div class="red-box">
          <a href="https://www.google.com/" target="_blank"></a>
          <img src="images/why-choose-img/eat_drink.png">
        </div>
      </div>
      <h2>EAT&DRINK WITHOUT REMOVING</h2>
    </div>

  </div>
</section>

Answer 1

你可以让外部.container 有一个display: flex 并在每个容器中以相同的方式对齐它的内容，只需添加：

.container {
    display: flex;
    flex-direction: column;         /* contents aligned vertically */
    align-items: center;
    justify-content: space-around;  /* contents are spaced in the same repeatable way */
}

这应该以适当的方式对齐它们，并且文本看起来会在水平轴上对齐。