GitHub README中图片并排及下方标题显示异常问题排查

这是GitHub的自动渲染逻辑导致的问题，不是你代码本身的问题。

GitHub在处理Markdown中的图片时，会自动将独立的<img>标签包裹进<a>标签（目的是让用户点击图片查看原图），这个额外的<a>标签打乱了你原本的flex布局结构：原本你的<figure>里是<img>+<figcaption>的垂直结构，现在变成了<a><img></a>+<figcaption>，而<a>默认是行内块元素，在未明确设置flex-direction: column的flex容器中，会和<figcaption>横向排列，导致标题跑到图片右侧。

修复方案 #

给每个<figure>标签明确设置垂直方向的flex布局，强制内部元素上下排列，同时确保外层容器的横向flex布局正常：

<details>
  <summary>正在阅读的书籍</summary>
  <div style="display: flex; gap: 20px; padding: 10px;">
    <!-- 第一本书 -->
    <figure style="display: flex; flex-direction: column; align-items: center; margin: 0;">
      <img src="你的书籍图片URL1" alt="书籍名称1" style="width: 150px;">
      <figcaption style="text-align: center; margin-top: 8px;">当前阅读：第一章 入门指南</figcaption>
    </figure>
    <!-- 第二本书 -->
    <figure style="display: flex; flex-direction: column; align-items: center; margin: 0;">
      <img src="你的书籍图片URL2" alt="书籍名称2" style="width: 150px;">
      <figcaption style="text-align: center; margin-top: 8px;">当前阅读：第三章 核心概念</figcaption>
    </figure>
  </div>
</details>

关键改动点：

• 给<figure>添加flex-direction: column，强制内部元素垂直排列
• 给<figure>设置align-items: center，让图片和标题居中对齐
• 给<figcaption>添加margin-top，避免标题和图片紧贴

另外注意：GitHub的Markdown渲染会过滤部分外部样式或复杂选择器，所以所有样式尽量用内联方式写在标签上，确保能正常生效。

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