本文详解如何利用 css flexbox 实现：左侧图片上方配文字、右侧图片下方配文字，同时确保左右图片与中间箭头严格垂直居中对齐，且适配不同尺寸图片、避免文字重叠与溢出。
本文详解如何利用 css flexbox 实现：左侧图片上方配文字、右侧图片下方配文字，同时确保左右图片与中间箭头严格垂直居中对齐，且适配不同尺寸图片、避免文字重叠与溢出。
要实现「文字与图片垂直对齐 + 图片与箭头水平居中」这一复合布局，关键在于分层控制对齐逻辑：外层 flex 控制三元素（左组、箭头、右组）的水平居中与垂直居中；内层 flex column 分别控制每侧图文的垂直分布（space-between 实现顶部文字 / 底部文字），而非依赖浮动或绝对定位。
以下是推荐的结构化解决方案：
✅ 正确 HTML 结构（语义清晰、嵌套合理）
<div id="container">
<div class="wrapper-img1">
<p id="name1">Boris</p>
<img class="image" src="https://www.kdnuggets.com/wp-content/uploads/tree-todd-quackenbush-unsplash.jpg?x-oss-process=image/resize,p_40" alt="Left avatar">
</div>
<p class="arrow">→</p>
<div class="wrapper-img2">
<img class="image" src="https://i1.sndcdn.com/avatars-000508491087-32hktm-t240x240.jpg?x-oss-process=image/resize,p_40" alt="Right avatar"><p id="name2">asd</p>
</div>
</div>
⚠️ 注意：
<img>是自闭合标签，不应写成<img>；添加alt属性提升可访问性。
✅ 核心 CSS（精准控制双层对齐）
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
#container {
display: flex;
flex-direction: row;
align-items: center; /* 垂直居中：让三列整体在容器中垂直居中 */
justify-content: center; /* 水平居中：确保左右图像+箭头整体居中 */
gap: 16px; /* 推荐使用 gap 替代 margin，更健壮 */
min-height: 200px; /* 可选：防止内容过少时高度塌陷 */
}
.wrapper-img1, .wrapper-img2 {
display: flex;
flex-direction: column;
align-items: center; /* 水平居中：文字与图片在各自列内居中 */
}
.wrapper-img1 {
justify-content: flex-start; /* 文字在上，图片在下 */
}
.wrapper-img2 {
justify-content: flex-end; /* 图片在上，文字在下 */
}
.image {
max-width: 90px;
max-height: 160px;
object-fit: contain; /* 保持宽高比，避免拉伸变形 */
}
.arrow {
font-size: 30px;
line-height: 1; /* 防止箭头因行高产生额外间距 */
align-self: center; /* 确保箭头自身也垂直居中（冗余但保险） */
}
? 关键设计原理说明
-
外层
#container的align-items: center是实现“所有图像和箭头垂直对齐”的核心——它使.wrapper-img1、.arrow、.wrapper-img2的交叉轴（即垂直方向）中心线对齐。 -
内层
justify-content差异化设置（flex-startvsflex-end）精准满足“左图上文、右图下文”需求，且不受图片高度差异影响：即使左侧图更高，wrapper-img1内部文字仍紧贴顶部，右侧文字紧贴底部，自然避免重叠。 -
移除所有
float声明：浮动会破坏 Flex 布局流，原代码中#name1和#name2的float不仅无效，还会引发清除问题，必须删除。 -
gap替代margin：更可靠地控制组件间距，避免margin在 Flex 容器中可能产生的折叠或兼容性问题。
? 进阶建议
- 若需响应式适配小屏幕，可在媒体查询中将
#container改为flex-direction: column，并调整justify-content。 - 如箭头需动态替换（如双向 ↔），建议用 SVG 或字体图标（如 Font Awesome），便于缩放与颜色控制。
- 对于真实项目，推荐将
.wrapper-img1/.wrapper-img2抽象为通用类（如.avatar-group），提升可复用性。
该方案完全脱离浮动与绝对定位，纯 Flexbox 驱动，语义清晰、兼容性好（支持 IE11+）、响应灵活，是现代图文对齐布局的最佳实践之一。
