CSS布局：左侧堆叠图片右侧文字垂直居中问题排查

• 结构未做分组：所有图片块、文本块在父容器#floated-imgs下平级排列，没有将「单张图片+对应文本」包裹为独立的行单元，300px宽的图片占据行内位置后，后续的文本块会被直接挤到下一行，无法出现在图片右侧。
• CSS属性冲突：.text-div中同时写了display:inline-block和display:flex两个布局声明，后面的flex属性会覆盖前面的inline-block设置，且没有配置和图片对齐的规则，无法实现垂直居中效果。
• 无效浮动设置：给#floated-imgs整体加左浮动属于冗余代码，会干扰内部元素的正常排版流。

• 重构HTML结构：给每一组图片+对应文本单独套一个类名为.img-text-row的父容器，作为独立行单元，每组内部只放当前行的图片块和文本块。
• 重写排版CSS：
  • 移除#floated-imgs的多余浮动
  • 给行容器.img-text-row设置flex布局，通过align-items: center直接实现内部图片、文本的垂直中部对齐，同时让两个元素自动左右排列
  • 清理.text-div中重复冲突的display属性，给文本块添加合适的左侧间距即可
• 补全最后一张e图片的文件后缀，避免资源加载异常。

HTML部分 #

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div id="container">
            <div id="floated-imgs">
              <div class="img-text-row">
                <div class="image-div"><img src="a.jpeg" /></div>
                <div class="text-div"><div>A</div></div>
              </div>
              <div class="img-text-row">
                <div class="image-div"><img src="b.jpeg" /></div>
                <div class="text-div"><div>B</div></div>
              </div>
              <div class="img-text-row">
                <div class="image-div"><img src="c.jpeg" /></div>
                <div class="text-div"><div>C</div></div>
              </div>
              <div class="img-text-row">
                <div class="image-div"><img src="d.jpeg" /></div>
                <div class="text-div"><div>D</div></div>
              </div>
              <div class="img-text-row">
                <div class="image-div"><img src="e.jpeg" /></div>
                <div class="text-div"><div>E</div></div>
              </div>
            </div>
        </div>
    </body>
</html>

CSS部分 #

#container { 
  overflow: hidden; 
  background-color: black; 
}
#floated-imgs img {
  display: block; 
  width: 300px;
}
.img-text-row {
  display: flex;
  align-items: center;
}
.image-div {
  flex-shrink: 0;
}
.text-div { 
  color: white; 
  font-family: Impact; 
  font-size: 50px; 
  padding-left: 40px;
}

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