如何实现文本与图片垂直对齐及图片间箭头居中对齐

要实现需求的布局，核心是把每个图片和对应文本封装成独立的垂直flex单元，再通过外层flex容器实现整体居中对齐，具体修改如下：

修改思路 #

• 左侧图片+上方文本、右侧图片+下方文本分别用垂直flex容器包裹，确保文本仅在对应图片的宽度范围内换行，不会跨到另一图片区域
• 外层flex容器控制水平排列，通过align-items: center让箭头与图片垂直居中对齐
• 移除浮动布局，避免布局偏移问题

修改后的代码 #

CSS

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.container {
  text-align: center;
  margin-top: 20px; /* 可选，增加顶部间距 */
}

/* 图片+文本的垂直容器 */
.image-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content; /* 容器宽度适配内容，避免文本过度拉伸 */
}

/* 左图上方的文本 */
#name1 {
  font-size: 15px;
  margin-bottom: 8px; /* 文本与图片的间距 */
  width: 100%; /* 文本宽度和图片一致，换行时不会超出 */
  word-wrap: break-word; /* 强制文本换行 */
}

/* 右图下方的文本 */
#name2 {
  font-size: 15px;
  margin-top: 8px; /* 图片与文本的间距 */
  width: 100%; /* 文本宽度和图片一致，换行时不会超出 */
  word-wrap: break-word; /* 强制文本换行 */
}

.image {
  max-width: 90px;
  max-height: 160px;
}

.arrow {
  font-size: 30px;
  margin: 0 15px; /* 箭头与左右图片的间距 */
}

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

HTML

<div id="container" class="container">
  <div class="flex-container">
    <!-- 左图+上方文本 -->
    <div class="image-group">
      <p id="name1">Boris</p>
      <img class="image" src="https://www.kdnuggets.com/wp-content/uploads/tree-todd-quackenbush-unsplash.jpg">
    </div>

    <p class="arrow">→</p>

    <!-- 右图+下方文本 -->
    <div class="image-group">
      <img class="image" src="https://i1.sndcdn.com/avatars-000508491087-32hktm-t240x240.jpg">
      <p id="name2">asd</p>
    </div>
  </div>
</div>

效果说明 #

• 左图上方的文本会自动在图片宽度范围内换行，不会延伸到右侧图片区域；右图下方的文本同理
• 无论两张图片高度是否一致，箭头始终与两张图片的垂直中线对齐
• 整体布局保持居中，符合需求

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