Markdown 图片排版指南

在使用 Markdown 编写文档、博客或笔记时，图片是提升内容表现力的重要元素。然而，标准 Markdown 对图片排版的支持较为有限。本文将介绍常用方法，帮助你实现更灵活美观的图片布局。

1. 基础图片插入语法

Markdown 插入图片的基本语法如下：

![替代文本](图片地址 "可选标题")

示例：

![示例图](https://example.com/image.jpg "这是一个示例")

2. 图片居中显示

标准 Markdown 不支持居中，但可通过嵌入 HTML 实现：

<div align="center">
  ![中心图片](https://example.com/image.jpg)
</div>

3. 设置图片宽度与高度

同样需使用 HTML 的 <img> 标签：

<img src="https://example.com/image.jpg" width="400" />

或使用内联样式：

<img src="https://example.com/image.jpg" style="width: 60%; height: auto;" />

4. 图文混排（左/右浮动）

通过 CSS 实现文字环绕图片效果：

<img src="https://example.com/image.jpg" style="float: left; margin: 0 15px 15px 0;" />
这是环绕在图片右侧的文字内容……

注意：部分 Markdown 渲染器可能不支持浮动样式，请根据实际平台测试。

5. 多图并排展示

使用表格或 Flex 布局实现多图横向排列：

<div style="display: flex; justify-content: space-around;">
  <img src="img1.jpg" width="30%" />
  <img src="img2.jpg" width="30%" />
  <img src="img3.jpg" width="30%" />
</div>

6. 注意事项

• 并非所有平台都支持 HTML 和 CSS（如 GitHub README 限制较多）。
• 优先使用相对路径或可靠的图床链接，避免图片失效。
• 为图片添加有意义的替代文本（alt），提升可访问性与 SEO。