如何在 table 单元格内的跨度内水平居中文本，只能访问跨度的 css？

Question

我想在 table 的一个特殊 table 单元格内水平对齐一些文本。文本位于跨度内。问题是 HTML 代码是第三方代码。我只能改变跨度的样式。

.Change {
  text-align: center;
}

<table>
  <tr>
    <td>Some random text</td>
    <td>Some random text</td>
  </tr>
  <tr>
    <td><span class="Change">Center me</span></td>
    <td>Some random text</td>
  </tr>
</table>

Answer 1

~~width : 100% ; and margin : 0 auto ;~~ 无效。我想那是因为 td 有一些预定义的样式，比如 table cell and indent 0

向右浮动并添加 100% 的宽度使其转义 soem 预定义样式并获得激活文本对齐的完整宽度

解决方案

.Change {
  text-align : center ;
  width : 100%;
  float: right;
}

<table>
<tr>
<td>Some random text</td>
<td>Some random text</td>
</tr>
<tr>
<td><span class="Change">Center me</span></td>
<td>Some random text</td>
</tr>
</table>

Answer 2

A <span> 元素默认是行内块。如果您只能更改该元素中的 CSS，请将显示设置为块状，这样它将占用单元格的宽度：

.Change {
  display: block;
  text-align: center;
}

<table>
  <tr>
    <td>Some random text</td>
    <td>Some random text</td>
  </tr>
  <tr>
    <td><span class="Change">Center me</span></td>
    <td>Some random text</td>
  </tr>
</table>

Answer 3

跨度自然是一个内联元素（参见 MDN）。为了让跨度占据其父级的宽度，它需要成为一个块级元素，您可以通过将其设置为 display: inline-block 来实现。然后 text-align: center 就会知道该怎么做了。

.Change {
  width: 100%;
  text-align: center;
  display: inline-block;
}

<table>
  <tr>
    <td>Some random text</td>
    <td>Some random text</td>
  </tr>
  <tr>
    <td><span class="Change">Center me</span></td>
    <td>Some random text</td>
  </tr>
</table>

如何在 table 单元格内的跨度内水平居中文本，只能访问跨度的 css？

How to horizontally center text inside a span inside table cell, with only access to css of the span?

css

html-table

解决方案