如何在表格单元格中水平居中显示跨度内的文本，只访问跨度的css

我想在表格的一个特殊表格单元格内水平对齐一些文本。文本位于跨度内。问题是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>

span自然是一个内联元素(请参阅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>

~~width : 100% ; and margin : 0 auto ;~~ 不工作。我想这是因为td有一些预定义的样式，比如表格单元格和缩进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>

默认情况下，<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>

解决方案

相关内容

最新更新

热门标签：