仅用内联CSS实现HTML文本垂直居中（Moodle测验场景）

你可以通过给外层容器添加flex布局的内联CSS来实现垂直居中，这是最简洁且兼容的方案，适合Moodle的文本框环境：

修改后的代码 #

<div style="display: flex; align-items: center;">
  <p>A&nbsp;=&nbsp;&nbsp;</p>
  <table>
    <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>
</div>

关键说明 #

• 外层div的display: flex会让内部的<p>和<table>自动并排，不需要再用float: left
• align-items: center是核心：它会让容器内的所有子元素在垂直方向上居中对齐，刚好匹配表格的高度

备选方案（兼容旧环境） #

如果遇到flex布局不支持的情况，可以改用inline-block+vertical-align：

<div>
  <p style="display: inline-block; vertical-align: middle; margin: 0;">A&nbsp;=&nbsp;&nbsp;</p>
  <table style="display: inline-block; vertical-align: middle;">
    <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>
</div>

这里需要给<p>和<table>都设置display: inline-block和vertical-align: middle，同时去掉<p>的默认外边距（margin:0）避免间距问题。

内容的提问来源于stack exchange，提问作者MetalMathician