Question

我无法使用以下代码集中文本。我犯了什么错误？还有更好的选择吗？

<html>
<body>
<table>
<tr ><td id="azone" colspan=3 style="border:1px solid black"><span style="border:1px solid black;background-color:green;margin:auto;" >Tense</span></td> </tr>
<tr > <td style="width:250px"></td> <td style="width:250px"></td> <td style="width:250px"> </td></tr>
<tr> <td></td> <td></td> <td> </td></tr>
</table>
</body>
</html>

Answer 1

您正在尝试使用margin: auto来居中文本，但这仅适用于块级CSS元素，<span>不是。因此，margin: 0 auto对您的display: inline <span>标记没有影响。在这种情况下，你想要的是text-align: center。

另请注意，我已将部分样式移至文档头部的<style>标记。这是一种更有条理的控制CSS样式的方法，可以帮助您避免在编辑代码时遇到的麻烦。

将您当前的代码更改为此，您应该没问题：

<html>
<body>
<style>
tr td span {
  border:1px solid black;
  background-color:green;
  text-align: center;
}     
</style>

<table>
<tr ><td id="azone" colspan=3 style="border:1px solid black" >Tense</span></td> </tr>
<tr > <td style="width:250px"></td> <td style="width:250px"></td> <td style="width:250px"> </td></tr>

Answer 2

您是否尝试过 text-align：center （CSS）？

您还可以使用＆lt; center＆gt;标签，如果你想。虽然不建议这样做，因为它们已被弃用。

如何居中文本

2 个答案: