没有 CSS 的 HTML 中的垂直居中文本（Moodle 测验）

Question

我想让一些文本垂直居中。

我在 LMS Moodle 中写问题，只能在一个小文本框中访问非常基本的 HTML 来创建问题，不幸的是我对 HTML 了解不够。我不认为我可以在这个小文本框中使用任何 CSS。至少，我不知道该怎么做。

我的最终目标是在表格旁边放置一些文本，文本与表格的高度垂直居中。我找不到这个问题的答案，希望它不是重复的。任何帮助是极大的赞赏。谢谢。

这是我目前所拥有的：

<div>
  <p style="float: left">A&nbsp;=&nbsp;&nbsp;</p>
  <table style="float: left">
    <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>

我正在使用

style="float: left"

以便文本和表格彼此相邻出现。

Answer 1

如果内联样式对您来说没问题，那么您可以使用父级

display:flex

上的

div

属性来排列您的组件。

我使用了

height:100vh

，它使用整个页面高度并使孩子居中。你可以根据你的需要进行调整。

<div style='height:100vh; display:flex; justify-content:center; 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>
   <p>=&nbsp;A&nbsp;&nbsp;</p>
</div>

Answer 2

你可以把你的桌子包在另一张桌子里。

  <table>
    <tbody>
      <tr>
        <td>A=</td>
        
        <td>
        
          <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>
          
        </td>
        
        <td> The text next to the table</td>
    </tbody>
  </table>