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代替

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

＆＃13;

table {
  width: 100%;
}

td {
  text-align: center;
}

/* Relevant CSS */
sup {
  display: inline-block;
  width: 0px;
}

＆＃13;

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

＆＃13;

Answer 2

这有点时髦，但能得到你的结果。只有字体大小和td宽度的静态值才可以。否则，浏览器将显示溢出到下一个单元格中的<sup>文本。

＆＃13;

table td {
  width: 200px;
  text-align: center;
  border: 1px solid black;
  }

h4 {
  position: relative;
  }
h4 sup {
  position: absolute;
  top: -8px;
  left 100%;
  }

＆＃13;

<table>
  <tr>
    <td>
      Some
    </td>
    <td>
      Other
    </td>
    <td>
      <h4>Hello<sup>World</sup></h4>      
    </td>
    <td>
      Text
    </td>
  </tr>
</table>

＆＃13;

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

2 个答案: