本文介绍在 moodle 等受限 lms 平台中，仅能使用内联 css 的前提下，通过 `display: flex` 实现文本与表格整体垂直居中对齐的可靠方案，并提供可直接复用的代码示例与兼容性注意事项。
在 Moodle 问答编辑器等轻量级 HTML 输入框中，开发者通常无法引入外部样式表或
关键在于：放弃 float: left 的旧式布局逻辑，改用 Flexbox 布局作为父容器的显示模式。Flexbox 天然支持主轴与交叉轴对齐，其中 align-items: center 可精确控制子元素在垂直方向上的居中位置，而 justify-content: center 则负责水平居中（可根据需要调整）。
以下是一个经过验证、可在 Moodle 中直接使用的完整示例：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
<div style="display: flex; align-items: center; gap: 12px;">
<p style="margin: 0;">A = </p>
<table style="border-collapse: collapse; margin: 0;">
<tbody>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</tbody>
</table>
<p style="margin: 0;">= A</p>
</div>✅ 说明与优势：
立即学习“前端免费学习笔记（深入）”；
- display: flex 使 成为弹性容器，其子元素（
和
）自动成为弹性项目；
- align-items: center 确保所有子元素在容器高度方向上垂直居中（即与表格自身高度对齐）；
- gap: 12px 替代冗余的 或外边距，提供语义化、响应式的间距控制；
- 移除 float 后，不再需要清除浮动，也避免了文档流破坏导致的布局塌陷问题；
- 所有样式均通过 style 属性内联定义，完全满足 Moodle 等平台的白名单限制。
⚠️ 注意事项：
- Moodle 版本 ≥ 3.9 默认启用现代 HTML/CSS 支持，Flexbox 在 Chrome/Firefox/Edge/Safari 中均表现稳定；若需兼容极老版本 IE（如 IE10 以下），则需回退至 vertical-align: middle + display: inline-block 方案（但会增加复杂度且可靠性下降，不推荐）；
- 表格默认带有上下外边距（margin-top/margin-bottom），务必显式设为 margin: 0，否则影响垂直对齐精度；
标签默认也有上下外边距，同样建议添加 style="margin: 0;" 保持紧凑；
- 若需限定容器高度（例如适配特定题干区域），可添加 height: 120px; 等固定值，Flexbox 仍能准确居中——无需使用 100vh 这类全屏单位（原答案中的 height: 100vh 仅适用于全屏场景，实际题干中易造成溢出，应按需调整）。
总结而言，在受控 HTML 环境中实现精准垂直居中，Flexbox 内联方案是目前最简洁、健壮且符合现代标准的选择。只需三行核心样式（display: flex; align-items: center; gap: Xpx;），即可替代过去需要多层嵌套、浮动与 hack 的复杂写法，显著提升 Moodle 试题排版的专业性与可维护性。
