本文介绍在 moodle 等仅支持基础 html 和内联 css 的学习管理系统中，如何通过 `display: flex` 配合 `align-items: center` 实现文本与表格的垂直居中对齐，无需外部样式表或 javascript，兼容性良好且代码简洁。
在 Moodle 试题编辑器等受限 HTML 环境中，你无法引入
更现代、简洁且可靠的方案是：将父容器设为 Flex 布局，并利用其内置的对齐能力。只需为包裹文本和表格的
添加三条关键内联样式：
- display: flex：启用弹性盒模型；
- align-items: center：使所有子元素在交叉轴（此处为垂直方向）居中；
- justify-content: center（可选）：若还需水平居中，可添加；否则可省略，子元素将按文档流从左到右排列。
✅ 注意：Moodle（尤其是较新版本）普遍支持 display: flex（Chrome 29+/Firefox 20+/Edge 12+/Safari 6.1+），实际教学场景中兼容性足够可靠。
以下是优化后的完整示例代码（已移除冗余 float，精简结构，语义更清晰）：
<div style="display: flex; align-items: center;">
<p style="margin: 0; white-space: nowrap;">A = </p>
<table style="margin: 0; border-collapse: collapse;">
<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; white-space: nowrap;"> = A</p>
</div>? 关键说明与注意事项：
立即学习“前端免费学习笔记（深入）”；
- 移除 height: 100vh：原答案中该声明会使容器撑满整个视口高度，导致页面布局异常（尤其在嵌入试题时）。实际应用中应完全省略固定高度，让 Flex 容器自动适应内容高度，从而确保垂直居中效果稳定、响应式。
-
重置默认边距：
默认有上下外边距，会破坏对齐精度，因此添加 margin: 0；
同理。
- 防止换行干扰：使用 white-space: nowrap 确保等号与字母紧邻显示，避免因空格或换行被折行。
- 无障碍友好：保持语义化标签（
表达公式片段，
表达矩阵），有利于屏幕阅读器识别。
- 备选方案提示：若极少数旧版 Moodle（如基于非常陈旧浏览器内核）不支持 Flex，可降级使用 vertical-align: middle + display: inline-block 组合，但需额外包裹、代码更冗长，且对齐精度略低——Flex 是当前首选方案。
综上，在 Moodle 等轻量 HTML 编辑环境中，display: flex 不仅语法简洁、效果精准，而且一次设置即可适配任意高度的表格或图像，是实现“文本与块级元素垂直居中”最高效、可持续的实践方式。
