Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
因为img默认是行内元素，margin: 0 auto对其无效；必须设display: block且父容器有明确宽度才生效；text-align: center应作用于父容器，flex布局需justify-content和align-items配合。
为什么直接给 <img> 加 margin: 0 auto 不居中
因为 <img> 默认是行内元素，margin: 0 auto 对它完全无效。浏览器只对块级元素（且有明确宽度）才计算左右自动外边距。常见错误是只改图片样式，却忘了设 display: block，或者父容器本身宽度不明确（比如被 float 或 position: absolute 干扰）。如果父容器没设 width 或内容撑不开，margin: 0 auto 就没“剩余空间”可分。
用 text-align: center 实现水平居中（兼容老浏览器）
这是最轻量、兼容性最好的方案，但必须作用在父容器上，不是 <img> 自身。适用场景：图文混排段落、页眉 Logo、卡片单图等纯水平居中需求。
-
text-align: center只影响行内子元素，<img>默认就是 inline，无需额外改display - 父容器不能是
display: flex/display: grid/float/position: absolute，否则该属性被忽略 - 若父容器里混了
<div> 这类块级子元素，它们不会被居中——<code>text-align对它们无效 - 垂直方向不管：图片仍贴顶，需靠
padding、line-height或外层 flex 容器配合
正确写法：
<div style="text-align: center">@@##@@</div>
用 display: flex 实现水平+垂直居中（现代项目首选）
这是目前最直观、可控的双向居中方式，但三个硬条件缺一不可：父容器启用 flex、有明确高度、图片未脱离文档流。很多人只写 justify-content: center，结果垂直方向完全没反应——因为 align-items: center 没空间可居中。
- 必须加在父容器上：
display: flex; justify-content: center; align-items: center - 父容器必须有高度参照，如
height: 100vh、min-height: 300px；否则align-items无效 - 图片自身加
max-width: 100%和height: auto，防止溢出、保持比例 - 旧 Android 4.4 及以下需加
display: -webkit-flex前缀 - 别直接在
上设display: flex，会把所有直系子元素（如多个<p></p>）变成 flex item，破坏结构
示例：
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">@@##@@</div>
响应式对齐要靠媒体查询切换父容器行为，不是重复设图片尺寸
小屏居中、中屏左对齐、大屏右对齐，关键不是每个断点都重写 img { width: 100% }，而是让父容器的对齐方式随视口变化。图片尺寸通常只需一次定义（max-width: 100% + height: auto），对齐逻辑交给父容器的 text-align 或 justify-content 控制。
- 用
text-align：媒体查询里切换父容器的text-align值，兼容性好 - 用
flex：媒体查询里切换justify-content: flex-start / center / flex-end，更灵活 - 避免给
<img src="logo.png">单独设margin: auto或float，会和媒体查询冲突 - 如果父容器有固定宽度或浮动，也会干扰媒体查询生效，需统一清理
例如：
@media (max-width: 768px) { .img-container { text-align: center; } }@media (min-width: 769px) and (max-width: 1024px) { .img-container { text-align: left; } }
真正容易被忽略的是父容器的状态：是否塌高、是否脱离文档流、是否被其他布局模式接管。图片本身几乎不需要复杂样式，居中成败全在它外面那层容器怎么配。
