Typora中img标签align属性失效因渲染器忽略过时HTML属性且采用Flex布局；应改用style="float:right; display:inline-block;"等CSS方案，并针对HTML/PDF导出差异调整写法。
Typora 里直接写 HTML <img> 标签是可行的，但对齐效果受 Markdown 渲染器和导出目标（HTML/PDF）双重影响，不能只靠 align 属性。
为什么 align="right" 在 Typora 预览里经常失效
Typora 默认使用 CommonMark + 扩展语法渲染，它会把纯 HTML 当作“内联片段”处理，忽略部分块级行为；align 是过时的 HTML4 属性，现代浏览器（包括 Typora 内置渲染引擎）已不保证支持。更关键的是：Typora 的实时预览用的是 CSS Flex 布局模拟段落流，<img align="right"> 不触发块级重排。
- ✅ 正确做法是用
style写 CSS，且必须带display: block或float - ⚠️
width和height建议用相对单位（如50%）或明确像素值，避免在 PDF 导出时拉伸变形 - ❌ 不要用
<center>标签——Typora 不识别，导出为 PDF 时直接消失
Markdown 混合 HTML 图片对齐的实操写法
想让图片右对齐并文字环绕？必须组合使用 float + margin + 显式 display：
<img src="diagram.png" alt="示意图" style="float: right; margin: 0 0 1em 1em; display: inline-block; max-width: 40%;"> 这是一段围绕图片的文字。Typora 预览中能看到右浮动效果，导出 HTML 也保留；导出 PDF 时若错位，把 <code>max-width</code> 改成固定像素（如 <code>300px</code>）更稳。
- ?
float: right是核心，inline-block防止图片被当成纯文本节点吞掉 - ?
margin四个值顺序是上右下左，这里右、下留空，左设 1em 让文字不贴图 - ? 导出 PDF 时，Pandoc 后端对
float支持有限，优先测试导出结果而非仅看预览
导出为 PDF 时图片偏移或居中失败怎么办
Typora 导出 PDF 实际调用的是内置的 Electron 渲染 + 打印样式，它会重置大部分自定义 float 和 margin。此时要换思路：放弃浮动，改用 CSS Grid 或绝对定位容器。
立即学习“前端免费学习笔记（深入）”；
- ✅ 最简方案：用
<div style="text-align: right;"><img ...></div>强制右对齐（仅适用于单图+不环绕文字） - ✅ 更稳方案：导出前切换到「源代码模式」，把图片包裹进
<figure style="text-align: center;">—— PDF 导出对<figure>的居中支持比<img>单独写可靠得多 - ⚠️ 别在
style里写!important：Typora 导出 PDF 会过滤掉带!important的内联样式
真正麻烦的不是怎么写对齐，而是同一段 Markdown 要同时满足「Typora 预览可读」「导出 HTML 可用」「导出 PDF 不错位」——这三个目标背后是三套不同的渲染逻辑，得按需切写法，没法一劳永逸。
