本文介绍在 moodle 等受限环境（仅支持内联 css）下，使用 `display: flex` 配合 `align-items: center` 快速实现文本与表格的垂直居中对齐，无需外部样式表或 javascript。
在 Moodle 试题编辑器等轻量级 HTML 输入框中，开发者通常无法引入
传统方案（如 float + line-height 或 vertical-align 表格单元格）在此场景下往往失效：float 会脱离文档流，导致父容器高度塌陷，且无法自然实现跨元素的垂直居中；而 vertical-align 仅对行内元素或表格单元格生效，不适用于块级容器间的对齐。
✅ 推荐解法：Flexbox 内联布局
将包裹文本与表格的
设为弹性容器，并启用垂直居中：
<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>
</div>? 关键样式说明：
- display: flex：将 变为弹性容器，子元素（
和
）成为弹性项目；
- align-items: center：使所有子元素在交叉轴（此处为垂直方向）居中对齐；
- gap: 12px（可选）：在文本与表格间添加统一间距，提升可读性；
- margin: 0：重置
和
默认外边距，避免意外偏移；
- border-collapse: collapse：优化表格边框显示（非必需，但推荐）。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- Moodle 旧版（如 3.5 及更早）可能对 Flexbox 支持有限，建议在目标环境中预览验证；
- 避免使用 height: 100vh（如部分示例所示），它会强制容器占满视口高度，反而破坏页面流布局，尤其在试题列表中易引发滚动异常；
- 若需兼容极老浏览器（如 IE10 以下），可降级使用 vertical-align: middle + display: inline-block 组合，但需额外包裹和精确尺寸控制，复杂度显著上升，不推荐在 Moodle 场景中采用；
- 所有样式必须写在 style 属性内，禁止换行或注释（Moodle 可能截断或解析失败）。
? 小结：在仅支持内联 CSS 的 LMS 环境中，Flexbox 是实现文本与表格垂直居中的最简洁、可靠方案。只需三行核心样式（display: flex; align-items: center; gap: Xpx），即可替代冗长的 hack 技巧，兼顾语义清晰性与维护性。实际使用时，优先测试渲染效果，并根据 Moodle 版本微调兼容性策略。
