垂直对齐不起作用

Question

我正在制作一个国际象棋棋盘，我需要将行的数字垂直居中。我找到了CSS属性vertical-align，但由于某些原因，我的文字似乎并未居中。所有数字都在他们自己的表格单元格中。

我的CSS代码如下所示：

.Numbers{
    background-color: #700000;
    width: 20px;
    font-family: verdana;
    color: white;
    text-align: center;
    vertical-align: middle;
    border-color: #700000;
}

以下是一些html：

<tr><td class = "Numbers"></td>

我非常感谢任何见解，谢谢！

Answer 1

请检查<td>的更高级别。 如果您想让此规则更重要，请在您的CSS中添加!important。预览：https://jsfiddle.net/k3nndmnt/2/

Answer 2

您的代码仅适用于水平居中。尝试制作相同的顶部和底部填充或使用行高：

.Numbers { padding-top: 30px; padding-bottom: 30px; }

，或者

.Numbers { height: 100px; line-height: 100px; white-space: nowrap; }

Answer 3

在您的父td类中使用以下css属性。

vertical-align: middle;