本文介绍在 moodle 等受限 lms 环境中，仅允许使用内联 css 的前提下，如何将文本与表格等块级元素垂直对齐——核心方案是为容器设置 `display: flex` 并配合 `align-items: center`。
在 Moodle 测验题干编辑器中，你通常只能使用基础 HTML 和内联样式（inline CSS），无法引入
✅ 推荐方案：Flexbox 内联布局
现代浏览器（包括 Moodle 默认支持的 Chrome/Firefox/Edge）均支持 display: flex 的内联写法。只需为包裹文本与表格的
设置以下三个关键样式：
- display: flex：启用弹性布局；
- align-items: center：使所有子元素在交叉轴（此处为垂直方向）居中；
- justify-content: center（可选）：水平居中；若需左对齐，可省略或设为 flex-start。
⚠️ 注意事项：
- 无需设置固定高度：align-items: center 会自动基于容器的实际高度（由子元素撑开）进行居中。原答案中 height: 100vh 是为全屏演示所设，在 Moodle 中应移除，否则可能导致内容被截断或出现多余空白；
- 避免 float：一旦启用 flex，float: left 不仅失效，还可能引发不可预期的渲染冲突，务必删除；
- 兼容性提示：Moodle 3.5+ 默认适配主流现代浏览器，Flexbox 完全可用；若需支持极旧版本（如 IE10 以下），则需降级方案（如 line-height 配合单行文本），但不推荐——Moodle 官方已停止对 IE 的支持。
? 正确代码示例（Moodle 实测可用）：
? 进阶建议：
- 使用 gap: 12px（而非 margin）统一控制子元素间距，语义更清晰且不受外边距合并影响；
- 为表格添加 border-collapse: collapse 和 border="1" 可提升可读性（Moodle 富文本编辑器常默认禁用表格边框）；
- 若需响应式适配小屏幕，可额外添加 flex-wrap: wrap 并为子元素设置 flex: 1，但多数测验场景中固定布局已足够。
总结：在 Moodle 等轻量 HTML 编辑环境中，display: flex + align-items: center 是垂直居中最简洁、可靠且符合现代标准的内联解决方案。摒弃浮动，拥抱弹性布局，即可一行代码解决长期困扰的对齐难题。
