我正在尝试使数字在框中水平居中对齐，但数字右对齐，如下图所示:
如果您认为我应该尝试不同的方法，请给我建议。
* {
margin:0;
padding:0;
}
.table{
width: 70px;
border-collapse: collapse;
border-width: 0;
}
th,td {
padding: 2px 5px 2px 5px;
text-align: center;
}
span {
display: inline-block;
text-align: right;
}<html>
<head>
<link rel="stylesheet" href="check.css">
</head>
<body>
<table class="table">
<thead>
<tr>
<th>Numbers</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>8</span></td>
</tr>
<tr>
<td><span>9</span></td>
</tr>
<tr>
<td><span>10</span></td>
</tr>
<tr>
<td><span>11</span></td>
</tr>
<tr>
<td><span>12</span></td>
</tr>
</tbody>
</table>
</body>
</html>数字将是动态的(一到四个字符之间)
最佳答案
我添加了边框，这样您就可以看到我是如何做到的。
将 td 内容居中对齐。
将 td > span 内容右对齐，宽度较小。
* {
margin:0;
padding:0;
}
.table{
width: 70px;
border-collapse: collapse;
border-width: 0;
}
td {text-align: center; border: 1px solid red;}
td span {
padding: 0;
text-align: right;
border: 1px solid blue;
width: 31px;
}
span {
display: inline-block;
text-align: right;
}<html>
<head>
<link rel="stylesheet" href="check.css">
</head>
<body>
<table class="table">
<thead>
<tr>
<th>Numbers</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>8</span></td>
</tr>
<tr>
<td><span>9</span></td>
</tr>
<tr>
<td><span>10</span></td>
</tr>
<tr>
<td><span>1122</span></td>
</tr>
<tr>
<td><span>112</span></td>
</tr>
</tbody>
</table>
</body>
</html>关于html - 水平居中对齐数字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46394944/