如何将文本对齐到Flex布局下的图片下方？

1. CSS语法与类名错误导致布局异常 #

你的CSS代码存在两处关键问题：

• 类名不匹配：HTML中使用的是rmi-services__services-wrapper（双下划线），但CSS里写成了单下划线的rmi-services_services-wrapper，导致样式无法绑定到目标元素。
• 语法缺失：.rmi-services_services-wrapper的样式未用大括号包裹，所有布局属性直接暴露在外，完全不生效。

错误代码片段：

.rmi-services_services-wrapper display: flex;
flex-direction: column;
gap: 1.8rem;

修复后代码：

.rmi-services__services-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

2. 文本位置问题的解决 #

如果你是在.rmi-services__service-gallery的闭合</div>之后添加文本，修复上述CSS问题后，文本会自动垂直排列在图片下方。如果仍出现侧边排列的情况，可额外检查：

• 确认文本元素未被设置display: inline或float属性
• 给文本容器添加width: 100%，强制占满父容器宽度，避免与图片并排

完整修复后的CSS示例 #

/* Helper classes */

.container {
  max-width: 1400px;
  margin: 0 auto;
  width: 90%;
}

.my-sec-1-mt {
  margin-top: 4rem;
}

.my-sec-2-mt {
  margin-top: 1.8rem;
}


/* Services section */

.rmi-services__services-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.rmi-services__service-gallery {
  width: 100%;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.rmi-services__service-gallery>.rmi-services__service-visual {
  display: flex;
  aspect-ratio: 1;
  border-radius: 0.5rem;
  overflow: hidden;
}

.rmi-services__service-gallery>.rmi-services__service-visual picture {
  height: 100%;
}

.rmi-services__service-gallery>.rmi-services__service-visual img {
  height: 100%;
  object-fit: cover;
  object-position: center;
}

带文本的HTML示例 #

<section class="rmi-services my-sec-1-mt">
  <div class="container">
    <div class="rmi-services__services-wrapper my-sec-2-mt">
      <div class="rmi-services__service">
        <div class="rmi-services__service-gallery">
          <div class="rmi-services__service-visual curve-border">
            <picture>
              <source srcset="{% static 'image_location' %}" type="image/webp">
              <img loading="lazy" class="img-left" src="{% static 'image_location' %}" alt="">
            </picture>
          </div>

          <div class="rmi-services__service-visual curve-border">
            <picture>
              <source srcset="{% static 'image_location' %}" type="image/webp">
              <img loading="lazy" src="{% static 'image_location' %}" alt="">
            </picture>
          </div>
        </div>
        <!-- 图片下方的文本 -->
        <p>这里是要显示在两张图片下方的文本内容</p>
      </div>
    </div>
  </div>
</section>

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