为什么这些图片不在网页中心答案

【问题标题】：why do these images not center on the webpage为什么这些图片不在网页中心
【发布时间】：2022-11-11 10:22:55
【问题描述】：

我在我的网站上的一个段落下将两个图像居中时遇到了一些麻烦。在图像中，我提供了它显示窗口最左侧的图像，我想将它们居中。我确实想指出，如果我根据需要取出图像中心的段落，但是一旦我进入段落，它就会被推到左边。

HTML

.downloads-about {
  display: flex;
  height: 100vh;
}

.downloads-about img {
  height: 400px;
  width: 300px;
  border-radius: 20px;
  margin-top: 50px;
}

.container-downloads {
  max-width: 1100px;
  margin: auto;
}

<section class="downloads-about">
  <div class="container-downloads">
    <h2>About</h2>
    <p>
      Lorem ipsum dolor sit ametorem ipsum dolor sit amet,orem ipsum dolor sit amet,orem ipsum dolor sit amet,orem ipsum dolor sit amet,orem ipsum dolor sit amet,orem ipsum dolor sit amet,,Lorem ipsum dolor sit ametorem ipsum dolor sit amet,orem ipsum dolor
      sit amet,orem ipsum dolor sit amet,orem ipsum dolor sit amet,orem ipsum dolor sit amet,orem ipsum dolor sit amet,,
    </p>
    <img src="/imgs/Image-resizer.JPG" alt="image resizer" />
    <img src="/imgs/Image-resizer2.JPG" alt="image resizer" />
  </div>
</section>

【问题讨论】：

我不确定您在 CSS 中的哪个位置进行了尝试。
您以.container-downloads 为中心，而不是图像。

标签： html css

【解决方案1】：

您可以将 text-align: center; 添加到容器中：

.downloads-about {
  display: flex;
  height: 100vh;
}

.downloads-about img {
  height: 400px;
  width: 300px;
  border-radius: 20px;
  margin-top: 50px;
}

.container-downloads {
  max-width: 1100px;
  margin: auto;
  text-align: center;
}

<section class="downloads-about">
  <div class="container-downloads">
    <h2>About</h2>
    <p>
      Lorem ipsum dolor sit ametorem ipsum dolor sit amet,orem ipsum dolor sit amet,orem ipsum dolor sit amet,orem ipsum dolor sit amet,orem ipsum dolor sit amet,orem ipsum dolor sit amet,,Lorem ipsum dolor sit ametorem ipsum dolor sit amet,orem ipsum dolor
      sit amet,orem ipsum dolor sit amet,orem ipsum dolor sit amet,orem ipsum dolor sit amet,orem ipsum dolor sit amet,,
    </p>
    <img src="https://via.placeholder.com/200x300" alt="image resizer" />
    <img src="https://via.placeholder.com/200x300" alt="image resizer" />
  </div>
</section>

【讨论】：

【解决方案2】：

您的问题是 p 扩展了元素框。如果你想集中图像，你可以用另一个名为 .box-center 的 div 包裹它们，并对其应用 flexbox 样式。

    .box-center {
      display: flex; /*Apply flexbox*/
      justify-content: center; /*Centralize images*/
    }

.downloads-about {
  display: flex;
  height: 100vh;
}

.downloads-about img {
  height: 400px;
  width: 300px;
  border-radius: 20px;
  margin-top: 50px;
}

.container-downloads {
  max-width: 1100px;
  margin: auto;
}

.box-center {
  display: flex;
  justify-content: center;
}

<section class="downloads-about">
  <div class="container-downloads">
    <h2>About</h2>
    <p>
      Lorem ipsum dolor sit ametorem ipsum dolor sit amet,orem ipsum dolor sit amet,orem ipsum dolor sit amet,orem ipsum dolor sit amet,orem ipsum dolor sit amet,orem ipsum dolor sit amet,,Lorem ipsum dolor sit ametorem ipsum dolor sit amet,orem ipsum dolor
      sit amet,orem ipsum dolor sit amet,orem ipsum dolor sit amet,orem ipsum dolor sit amet,orem ipsum dolor sit amet,,
    </p>
    <div class="box-center">
      <img src="/imgs/Image-resizer.JPG" alt="image resizer" />
      <img src="/imgs/Image-resizer2.JPG" alt="image resizer" />
    </div>
  </div>
</section>

【讨论】：