本文介绍在 moodle 等受限 lms 环境中，仅允许使用内联 css 的前提下，如何将文本与表格等元素整体垂直居中对齐——核心方案是利用 `display: flex` 配合 `align-items: center`，无需外部样式表或 javascript。
在 Moodle 试题编辑器等轻量级 HTML 输入框中，开发者通常无法引入
推荐采用现代、简洁且兼容性良好的 Flexbox 方案：将包含文本和表格的父容器设为 display: flex，并启用 align-items: center 实现子元素的垂直居中。该方法语义清晰、代码精简，且所有样式均通过 style 属性内联定义，完全满足 Moodle 的限制要求。
以下为可直接复制使用的完整示例代码：
<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>✅ 关键要点说明：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- display: flex 启用弹性布局，使子元素（
和
）成为弹性项目；
- align-items: center 确保所有子元素在其交叉轴（即垂直方向）上居中对齐；
- gap: 12px（可选）替代 margin 控制元素间距，更简洁可靠；
- 移除 float 及其副作用，避免额外清除操作；
- 为
和
显式设置 margin: 0，防止浏览器默认外边距干扰对齐效果；
- 表格添加 border-collapse: collapse 提升视觉整洁度（非必需，但推荐）。
⚠️ 注意事项：
- Moodle 使用的富文本编辑器（如 Atto）可能自动过滤部分 CSS 属性。若 display: flex 未生效，请确认 Moodle 版本 ≥ 3.5（Flexbox 支持自 Chrome 29 / Firefox 20 起已广泛可用）；
- 避免使用 height: 100vh（如原答案所示），因其强制拉伸容器至视口高度，在试题页面中易导致布局异常或滚动条干扰；应依赖内容自然高度 + align-items: center 实现响应式居中；
- 若需兼容极老旧环境（不推荐），可退化为 vertical-align: middle + display: inline-block 方案，但对多行文本或复杂结构支持较差，Flexbox 是当前最优解。
综上，在 Moodle 试题中实现文本与表格的垂直居中，只需一个启用了 Flex 布局的
容器，配合几行内联样式即可稳健达成目标——简洁、标准、可维护。
