使CSS`text-align:center`忽略一些文本

Question

这是我尝试过的:

table {
  width: 100%;
}

td {
  text-align: center;
}

td > h4 {
  display: inline
}

<table>
  <td>
    <h4>Hello</h4><sup>World</sup>
  </td>
</table>

不幸的是,浏览器将"Hello"和"World"集中在一起.我怎样才能集中"你好"(但仍然有"世界"跟着它)？

Answer 1

这是一些非常简单的CSS:

sup {
  display: inline-block;
  width: 0px;
}

想法是强制宽度为0,但允许它溢出.(你不能在inline元素上设置宽度,所以我们inline-block改用)

您可以在下面的代码段中看到完整的示例:

table {
  width: 100%;
}

td {
  text-align: center;
}

/* Relevant CSS */
sup {
  display: inline-block;
  width: 0px;
}

<table>
  <tr>
    <td>
      <h4 style="display: inline;">Hello</h4><sup>World</sup>
    </td>
  </tr>
</table>