中心文字忽略上标

Question

我有一个居中对齐文本表。但是其中一些文本包含上标。 有没有一种方法可以使文本对齐并忽略上标？

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

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

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

Answer 1

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="chart"></canvas>

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;
}