html - 居中文本忽略上标

Question

我有一个居中对齐的文本表。但有些文本包含上标。有没有办法让文本对齐并忽略上标？

例如，在这段代码中，如何使 2 在 1 的正下方对齐。

td {
  width: 200px;
  text-align: center;
}

<table>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>2<sup>hello</sup></td>
  </tr>
</table>

标签： htmlalignmentsuperscript

Answer 1

您可以将文本包装在一个跨度中，并绝对定位上标文本：

td {
  width: 200px;
  text-align: center;
}

td>span {
  position: relative;
}

span>sup {
  position: absolute;
  /* play with the below to line up your sup properly */
  top: -0.4em;
  left: 100%;
  margin-left:0.1em;
}

<table>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td><span>2<sup>hello</sup></span></td>
  </tr>
</table>