Css 当单元格内容非常小时，表格单元格上垂直对齐的奇怪行为

由于垂直对齐的奇怪行为，我发现不可能在单个

中将所有3个

中的元素居中

我的整个表是一个数据表，我需要有2个边按钮（箭头），中间的文本都是垂直居中的。我原以为每个包含

的页面上的

vertical align:middle

就可以了，但Firefox上的箭头不知怎么被拖下来了：

它们在铬合金上定位良好：

我试着在笔上重建Firefox的问题，但最初无法。只是在做了一些修改之后，我才发现当中心元素足够小时，

垂直对齐的奇怪行为

因此在Firefox上的渲染都是错误的。请注意，这次我使用了
垂直对齐：top
而不是
middle
，因为它更好地说明了问题。黑盒子应该到达蓝色盒子的唯一顶部，但由于某些原因，直到你增加它的高度它才会到达

这是Firefox的屏幕（它触底而不是触顶！）：


和Chrome，其中中间比顶部多：

这种行为的原因是什么？在这种情况下，如何正确对齐元素？我尝试了绝对定位（将
position:relative
赋予包含
的元素，并将
position:absolute
赋予其子元素），但在IE计算相对高度时遇到了一个问题-我将该问题提交为。我要补充的是，所有尺寸都是可变/动态的，因此布局不能依赖于任何固定尺寸计算，但必须完全响应。
您添加的
垂直对齐：顶部在错误的位置。将其添加到
中，同时也要注意页边空白。希望这有帮助


表格{
边界间距：0；
边界塌陷：塌陷；
边框：1px纯蓝色；
}
tr{
背景色：#ededed；
}
th{
填充：0；
保证金：0；
}
.文本{
填充：0 5px；
字体大小：12px；
}
钮扣{
边界：0；
宽度：50px；
高度：10px；
背景色：黑色；
保证金：0；
垂直对齐：顶部；
}

正文
我可以给你一个解决办法，但无法正确解释。我认为问题在于不同类型的子元素继承了不同的
垂直对齐
规则，即
内联
和
块
。解决方法是将
设为块，与
相同

如果需要进一步的像素完美调整，还可以添加：

.text {
  line-height: 1;
}

这使得它在Firefox和Chrome上看起来都一样

这里的演示
当设置在儿童身上时，它可以在必要时工作，因此感谢您提供的解决方案。但是我没有把它放错地方。在表格单元格上使用时，“垂直对齐”将对齐单元格的内容。例如，“顶部-将单元格的顶部填充边缘与行的顶部对齐。”（）。所以问题仍然存在——这种奇怪的行为是从哪里来的？@罗伯特：是的。您应用了
垂直对齐：顶部th
元素上的code>，这意味着该行中的所有
th
元素将在行的顶部对齐。它不会对
th
的子元素产生影响，因此原因很简单，您没有在黑色区域应用垂直对齐。@ballintpekker，正如您所说，我在
th
上应用了垂直对齐，而不是在
tr
上应用了垂直对齐，因此它显然不会对行中的所有单元格产生影响。“将单元格的顶部填充边缘与行的顶部对齐”意味着单元格内的元素（子元素）将与单元格的顶部边缘对齐（因为该单元格内没有顶部填充）。只要将“添加<代码>显示：块更改为<代码>按钮如@sdcr建议的那样”，您就可以测试它是否工作正常。
.text {
  line-height: 1;
}