垂直对齐不起作用答案

【问题标题】：Vertical alignment not working垂直对齐不起作用
【发布时间】：2016-01-27 02:58:02
【问题描述】：

我正在制作一个棋盘，我需要将行的数字垂直居中。我找到了 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>

如果有任何见解，我将不胜感激，谢谢！

【问题讨论】：

您需要发布您的 HTML...
好的，我做到了！谢谢你告诉我
vertical-align: middle; 相对于下一个更高（外部）级别应用；检查下一个外层是什么；也许那个框只有一个文本行高，所以它相对于那个来说是“中间”的。

标签： html css chess

【解决方案1】：

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

【讨论】：

我对每个 td 都有这样的属性：td { height:100px; width:100px; padding:0px; display:inline-block; border:1px solid black; } 所以也许这会影响它？
您可以尝试删除 display:inline-block;预览：jsfiddle.net/k3nndmnt/4

【解决方案2】：

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

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

或者，

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

【讨论】：

【解决方案3】：

在你的父 td 类中使用下面的 css 属性。

vertical-align: middle;

【讨论】：

没用，我认为这与我的显示有关，因为它们是内联块