mediplus lite中图片不居中需用text-center类包裹；health-icon需d-flex容器配合align-self；margin:0 auto无效因img默认inline，应设display:block或用text-center；health-section区块须用data-align属性控制对齐。

HTML图片在Mediplus Lite里不居中？检查img的父容器类名

Mediplus Lite 主题默认对 img 标签不做强制居中，它依赖 Bootstrap 的响应式工具类。如果你直接写 <img src="...">，图肯定靠左对齐。

常见错误现象：在页面编辑器里点了“居中”，预览却没生效；或用 Gutenberg 插入图片后选了居中，但前端显示仍偏左。

• 必须给 img 外层加一个带 text-center 类的 <div> 或 <code><p></p>
• 如果图片在 Gutenberg 的「图像区块」里，右键 →「编辑 HTML」，手动在外围 <figure></figure> 上加 class="text-center"
• 避免用 aligncenter 这类 WordPress 旧类名——Mediplus Lite 不识别它，也不加载对应 CSS

Mediplus Lite 的健康图（health-icon）怎么对齐文字？用align-self配合 Flex 容器

主题自带的健康图（比如 health-icon 短代码或 SVG 图标）常和文字排在同一行，但默认基线不对齐，看起来像“悬空”或“下沉”。

使用场景：在服务介绍、特色模块里，图标 + 文字并列显示时视觉割裂。


Article To Html
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
下载
• 把图标和文字包进 <div class="d-flex align-items-center">，再给图标加 <code>class="align-self-start" 或 "align-self-center"
• 不要只依赖 vertical-align: middle —— Mediplus Lite 的 CSS 重置里清掉了大部分内联对齐效果
• 如果用短代码如 [health-icon icon="heart"]，需在前后加 HTML 容器，短代码本身不支持对齐参数

为什么margin: 0 auto对图片无效？检查父元素是否是 inline 或未设宽度

这是最常被忽略的兼容性坑：Mediplus Lite 默认把文章内容区设为 max-width: 750px，但段落内图片仍是 display: inline，margin: 0 auto 对 inline 元素完全不起作用。

性能影响小，但逻辑卡死：写了居中样式却没反应，容易让人反复改 CSS 而忽略 display 类型。

• 给 img 加 style="display: block; margin: 0 auto;" 是最快见效方式
• 更稳妥的做法是统一用 <div class="text-center"><img ...></div>，避免内联样式污染
• 别在子主题 CSS 里盲目覆盖 img { display: block } —— 会影响头像、按钮图标等其他地方

Mediplus Lite 的health-section区块里图片错位？优先用主题内置的data-*属性控制

健康图相关区块（如 health-section）是主题封装好的，它读取 data-align 属性而非通用 CSS 类。硬套 text-center 可能被 JS 覆盖。

容易踩的坑：在区块 HTML 源码里加了 class="text-center"，保存后又被主题 JS 清掉，或者对齐失效。

• 正确做法：在区块设置面板里找「对齐方式」选项（通常在右栏「区块设置」→「高级」），选「居中」
• 如果必须手写，用 <div class="health-section" data-align="center">，主题 JS 会识别并自动加对应类 <li>不要用 <code>!important 强行覆盖，Mediplus Lite 的 JS 初始化阶段会重设 style 属性

复杂点在于：同一个图片，在编辑器里看着对齐，前台可能因 JS 加载顺序或缓存错位。最稳的方式是绕过区块，用纯 HTML + Bootstrap 类重建结构，尤其当你要做响应式断点对齐时。