在Moodle测验开发场景中，由于平台安全策略和主题限制，通常禁止使用外部样式表和内部样式块，只能依赖内联样式完成页面布局调整，文本垂直居中是其中非常常见的需求。下面介绍几种仅用内联样式就能实现文本垂直居中的方案，同时验证其在Moodle测验环境中的兼容性。
方案一：单行文本垂直居中
如果只需要处理单行文本，最简便的方式是利用line-height属性，将行高设置为容器高度，即可实现文本在容器内垂直居中，该方案在Moodle测验中兼容性极佳。
<div style="height: 60px; line-height: 60px; text-align: center; border: 1px solid #ccc;"> 单行居中文本 </div>
注意line-height的值需要和容器的height值完全一致，否则无法实现垂直居中效果，同时该方案仅适用于文本内容不会换行的情况。
方案二：多行文本垂直居中（表格布局法）
对于多行文本，可以使用表格的vertical-align属性实现垂直居中，Moodle测验环境对表格相关内联样式的支持度很高，不会出现样式失效的问题。
<table style="width: 100%; height: 120px; border: 1px solid #ccc;">
<tr>
<td style="vertical-align: middle; text-align: center;">
这是多行文本内容，第一行内容<br/>
这是第二行内容，表格布局可以很好地实现垂直居中效果
</td>
</tr>
</table>
该方案的核心是利用表格单元格默认的vertical-align: middle特性，只需要给td元素添加对应的内联样式即可，不需要额外的复杂属性。
方案三：多行文本垂直居中（Flex布局法）
如果Moodle测验环境支持Flex相关属性，也可以使用Flex布局实现垂直居中，不过需要先确认目标Moodle版本是否对Flex内联样式做了限制。
<div style="display: flex; align-items: center; justify-content: center; height: 120px; border: 1px solid #ccc;">
<div>
这是多行文本内容，第一行内容<br/>
这是第二行内容，Flex布局实现的垂直居中效果
</div>
</div>
该方案需要在容器上设置display: flex，同时通过align-items: center控制垂直方向居中，justify-content: center控制水平方向居中，兼容现代Moodle版本。
方案兼容性对比
以下是三种方案在Moodle测验环境中的兼容性对比：
| 方案 | 适用场景 | Moodle兼容性 |
|---|---|---|
| line-height方案 | 单行文本 | 全版本支持 |
| 表格布局方案 | 多行文本 | 全版本支持 |
| Flex布局方案 | 多行文本 | 仅支持较新版本Moodle |
注意事项
- 所有样式必须写在元素的
style属性中，不能出现<style>标签或者外部CSS引用，否则会被Moodle过滤。 - 避免使用Moodle明确禁止的CSS属性，比如
position: fixed等，这类属性在测验页面中通常会失效。 - 如果不确定Moodle版本是否支持某类属性，优先选择表格布局方案，兼容性最有保障。
HTML内联样式文本垂直居中Moodle_测验兼容修改时间：2026-06-19 20:33:18