如何消除README.md中的文本环绕，让图片独占一行？

以下几种方法可以确保每张图片单独占一行，避免窄图并排或文本环绕的情况：

方法1：用HTML div标签包裹图片 #

通过div块级元素强制图片所在区域独占一行，还能额外设置上下间距：

<div style="display: block; margin: 10px 0;">
  <img src="你的图片URL" alt="图片描述">
</div>
<div style="display: block; margin: 10px 0;">
  <img src="另一张图片URL" alt="另一张图片描述">
</div>

方法2：强制图片宽度占满容器 #

利用CSS让图片宽度撑满当前容器，自然独占一行，适合需要统一图片宽度的场景：

<img src="你的图片URL" alt="图片描述" style="width: 100%; display: block; margin: 10px 0;">

如果使用GitHub Flavored Markdown，也可以用简化语法：

![图片描述](你的图片URL){: width="100%" }

方法3：使用HTML p标签包裹图片 #

p标签本身是块级元素，包裹图片后会自动独占一行：

<p>
  <img src="你的图片URL" alt="图片描述">
</p>

这些方法在GitHub、GitLab等主流代码托管平台的README中均能生效，解决你遇到的窄图并排、文本环绕问题。

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