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>或<p> - 如果图片在 Gutenberg 的「图像区块」里，右键 →「编辑 HTML」，手动在外围
<figure>上加class="text-center" - 避免用
aligncenter这类 WordPress 旧类名——Mediplus Lite 不识别它，也不加载对应 CSS
Mediplus Lite 的健康图（health-icon）怎么对齐文字？用align-self配合 Flex 容器
主题自带的健康图（比如 health-icon 短代码或 SVG 图标）常和文字排在同一行，但默认基线不对齐，看起来像“悬空”或“下沉”。
使用场景：在服务介绍、特色模块里，图标 + 文字并列显示时视觉割裂。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 把图标和文字包进
<div class="d-flex align-items-center">，再给图标加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 会识别并自动加对应类 - 不要用
!important强行覆盖，Mediplus Lite 的 JS 初始化阶段会重设style属性
复杂点在于：同一个图片，在编辑器里看着对齐，前台可能因 JS 加载顺序或缓存错位。最稳的方式是绕过区块，用纯 HTML + Bootstrap 类重建结构，尤其当你要做响应式断点对齐时。
