本文介绍在 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 实测可用）：
<div style="display: flex; align-items: center; gap: 12px;">
<p>A = </p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<table border="1" style="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>= A</p>
</div>? 进阶建议：
- 使用 gap: 12px（而非 margin）统一控制子元素间距，语义更清晰且不受外边距合并影响；
- 为表格添加 border-collapse: collapse 和 border="1" 可提升可读性（Moodle 富文本编辑器常默认禁用表格边框）；
- 若需响应式适配小屏幕，可额外添加 flex-wrap: wrap 并为子元素设置 flex: 1，但多数测验场景中固定布局已足够。
总结：在 Moodle 等轻量 HTML 编辑环境中，display: flex + align-items: center 是垂直居中最简洁、可靠且符合现代标准的内联解决方案。摒弃浮动，拥抱弹性布局，即可一行代码解决长期困扰的对齐难题。
