本文详解如何利用 css flexbox 实现：左侧图像上方显示文字、右侧图像下方显示文字，同时确保左右图像垂直居中、中间箭头水平垂直居中，且文字自动换行不重叠——完美适配不同尺寸图像。
本文详解如何利用 css flexbox 实现：左侧图像上方显示文字、右侧图像下方显示文字，同时确保左右图像垂直居中、中间箭头水平垂直居中，且文字自动换行不重叠——完美适配不同尺寸图像。
在响应式图文布局中，常见需求是将文字与图像进行精确的垂直对齐（如文字置于左图顶部、右图底部），同时让两个图像及中间箭头整体水平居中、垂直居中。传统浮动（float）或 text-align 方案难以兼顾图文包裹性与跨尺寸鲁棒性，而现代 Flexbox 提供了简洁可靠的解决方案。
核心思路是三层嵌套 Flex 布局：
- 外层容器（
#container）采用display: flex+flex-direction: row，实现左右结构水平排列，并通过align-items: center保证所有子项垂直居中； - 左右图像区域各自封装为独立的
flex-column容器（.wrapper-img1/.wrapper-img2），使用justify-content: space-between将文字与图像分别“推”至顶部和底部； - 中间箭头
<p class="arrow">→</p>作为独立 flex 项，天然随外层align-items: center垂直居中，无需额外定位。
以下是完整、可直接运行的代码示例：
<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"
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"
alt="Right avatar">
<p id="name2">asd</p>
</div>
</div>* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
#container {
display: flex;
flex-direction: row;
align-items: center; /* 垂直居中所有子项（含文字、图片、箭头） */
justify-content: center; /* 水平居中整体结构（可选，增强居中效果） */
gap: 16px; /* 推荐添加 gap 替代 margin，更可控 */
padding: 20px;
}
.wrapper-img1,
.wrapper-img2 {
display: flex;
flex-direction: column;
align-items: center; /* 文字与图像水平居中对齐 */
justify-content: space-between; /* 文字顶/底分布，避免重叠 */
min-width: 90px; /* 防止窄图导致文字挤压 */
}
.image {
max-width: 90px;
max-height: 160px;
object-fit: cover; /* 保持图像比例，避免拉伸变形 */
border-radius: 4px;
}
.arrow {
font-size: 30px;
line-height: 1; /* 避免因行高导致垂直偏移 */
margin: 0;
color: #333;
}✅ 关键优势说明：
-
自适应不同图像高度：因
.wrapper-img1和.wrapper-img2独立控制内部对齐，即使左图高、右图矮，文字也不会溢出或重叠； -
箭头绝对居中：作为 flex 项，它自动随
#container的align-items: center垂直居中，且gap属性确保左右间距一致； - 语义清晰 & 可维护性强：HTML 结构明确表达「左图文块」「箭头」「右图文块」逻辑，便于后续扩展（如添加 hover 效果、动画或响应式断点）；
-
无浮动干扰：彻底弃用
float: left/right（已过时且易引发清除问题），全部由 Flexbox 承担布局职责。
⚠️ 注意事项：
- 图像标签必须为自闭合写法（
<img ... alt="如何使用 Flexbox 实现图文垂直对齐与箭头居中布局" >），避免浏览器解析异常； - 若文字内容较长，建议为
.wrapper-img1 p和.wrapper-img2 p添加max-width: 100%和word-break: break-word，确保换行友好； - 在移动端可配合媒体查询缩小
font-size和gap，提升小屏体验。
该方案兼顾语义化、可访问性与视觉一致性，是现代前端布局中处理「图文+分隔符」组合的推荐实践。
