Html 为什么'；t垂直对齐：在表格单元格中使用输入元素的中间工作？

这是我的密码：

*{垂直对齐：顶部；边距：0；}
td{垂直对齐：中间；边框：1px实心红色；}
td:n子（1）{线高：3em；}
td:n子（2）{线高：4em；}
td:n子（3）{线高：0.1em；}
p、 输入{outline:1px纯绿色；}

一些垂直居中的文本。

您已经在

td

上设置了

垂直对齐：中间
，每个都是
输入
元素的父元素

但是
垂直对齐
属性不是继承的（）

因此，一种解决方案是将规则直接应用于输入：


*{垂直对齐：顶部；边距：0；}
td{垂直对齐：中间；边框：1px实心红色；}
td:n子（1）{线高：3em；}
td:n子（2）{线高：4em；}
td:n子（3）{线高：.1em；}
p、 输入{大纲：1px纯绿色；}
输入{垂直对齐：中间；}/*新建*/

一些垂直居中的文本

由于单元格具有
垂直对齐：中间
，因此其内容将与单元格的中间对齐

但在这种情况下，它并不明显，因为内容垂直占据了所有单元格

这是因为该属性设置了a的最小高度，并且使用了非常高的值

td:n个孩子（2）{
线高：4em；
}

然后，输入是一个内联级别的元素。因此，其相对于该行框的垂直对齐将由输入的

*{
垂直对齐：顶部；
}

如果要在单元格中间对齐输入，应在输入上使用
vertical align:middle
，将其对齐到与单元格中间对齐的行框的中间

输入{
垂直对齐：中间对齐；
}


*{
垂直对齐：顶部；
保证金：0；
}
运输署，输入{
垂直对齐：中间对齐；
边框：1px纯红；
}
运输署：第n名儿童（1）{
线高：3em；
}
运输署：第n名儿童（2）{
线高：4em；
}
运输署：第n名儿童（3）{
线高：0.1米；
}
p、 输入{
外形：1px纯绿色；
}


一些垂直居中的文本。

我想这是因为：

*{vertical-align: top;}

当您使线条高度大于td（父项）时，它即
输入
（子项）向外缩放，因此如下所示：
垂直对齐：顶部而不是
垂直对齐：居中
首先，我感谢你们所有人给出了非常有条理的答案！其次，我怀疑在输入元素周围有一个虚拟或隐式对象，对其应用了line height属性，并将其垂直对齐属性设置为“top”。这基本上就是奥利奥在下一篇文章中写的，行框。CSS的另一个例子并不完全是不言自明的，但需要在你的头脑中有一个非常详细的隐式模型来理解它的规则…10亿次的投票。。。我在许多项目中多次使用垂直对齐，它似乎总是给我带来问题，最后我在这里找到了这个答案，这让我非常清楚，“但是垂直对齐属性是不可继承的。”因此，在把我的下巴从地板上取下来之后，我很高兴替换
td的任何实例{vertical align:whatever；}
with
td*{vertical align:whatever；}
对于上一个属性，我一直认为我得到了相同的效果。非常感谢！我期待着在将来减少对该属性的混淆。@VoidKing，我很高兴我能提供帮助。顺便说一句，记住
垂直对齐
仅适用于
表格单元格
和
内联级别
e元素。