网页图片无法居中求助：添加段落后排版偏移

尝试将段落下方的两张图片居中时遇到异常：图片显示在窗口最左侧，移除段落时能正常居中，添加段落后就被挤到左侧。
效果截图：段落下方两张图片紧贴窗口左侧，未呈现居中状态

相关代码 #

CSS代码 #

.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;
}

HTML代码 #

<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>

解决办法 #

问题出在.downloads-about的display: flex布局，以及.container-downloads缺少明确的居中规则。当段落内容撑满容器宽度后，图片失去居中依据，就会靠左排列。

修改方案如下：

1. 给.container-downloads添加布局规则，让内部元素垂直排列且水平居中：

.container-downloads {
  max-width: 1100px;
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

2. 调整.downloads-about的样式：
   • 若不需要它作为flex容器，直接删掉display: flex；
   • 若要保留flex布局，添加justify-content: center，确保.container-downloads在父容器内居中：

.downloads-about {
  height: 100vh;
  justify-content: center;
}

修改完成后，无论是否存在段落，图片都会保持居中状态。

内容的提问来源于stack exchange，提问作者Mendi