Html 表td溢出滚动，中间垂直对齐

我在

表

中添加了

表

td

。内部的

表格

td

需要在包含更多文本时滚动，所以我只是在其中添加了一个span，并应用CSS属性来限制

高度

，使用

overflow-y:auto

问题是：如何将表td内部的文本垂直居中对齐？

或者需要应用

垂直对齐：中间

代码如下：


td{
文本对齐：居中；
垂直对齐：中间对齐；
边框：1px实心#ddd；
边界塌陷：塌陷；
}
.tbl小型{
宽度：100%；
}
.tbl小型运输工具{
高度：40px；
溢出：自动；
}
.tbl小td跨度{
高度：40px；
宽度：100%；
溢出y：自动；
显示：块；
垂直对齐：中间对齐；
文本对齐：居中；
}

正文
Lorem ipsum dolor sit amet，是一位杰出的职业经理人，他是一位临时雇员
子文本
子文本
子文本
子文本
子文本
正文
添加
最大高度
而不是
高度

.tbl-small td span {
  max-height: 40px;
  width: 100%;
  overflow-y: auto;
  display: block;
  vertical-align: middle;
  text-align: center;
}


td{
文本对齐：居中；
垂直对齐：中间对齐；
边框：1px实心#ddd；
边界塌陷：塌陷；
}
.tbl小型{
宽度：100%；
}
.tbl小型运输工具{
高度：40px；
溢出：自动；
}
.tbl小td跨度{
最大高度：40px；
宽度：100%；
溢出y：自动；
显示：块；
垂直对齐：中间对齐；
文本对齐：居中；
}

正文
Lorem ipsum dolor sit amet，是一位杰出的职业经理人，他是一位临时雇员
子文本
子文本
子文本
子文本
子文本
正文
将此添加到您的
span
内部
td
：

td span{
display:flex;
align-items:center;
justify-content:center // this only for horizontal align
}

您必须将
行高
添加到td中，并在有滚动条的位置继承
行高：继承


td{
文本对齐：居中；
垂直对齐：中间对齐；
边框：1px实心#ddd；
边界塌陷：塌陷；
}
.tbl小型{
宽度：100%；
}
.tbl小型运输工具{
高度：40px；
溢出：自动；
}
.tbl小td跨度{
最大高度：40px；
宽度：100%；
溢出y：自动；
显示：块；
垂直对齐：中间对齐；
文本对齐：居中；
}

正文
Lorem ipsum dolor sit amet，是一位杰出的职业经理人，他是一位临时雇员
子文本
子文本
子文本
子文本
子文本
正文
使用“线高度”属性使其垂直居中
在代码中添加此css

.tbl-small td {
  height: 40px;
  overflow: auto;
  line-height:40px;
}

但有时所有其他td可能有更多的文本。在这种情况下，我们必须使用最大高度，而不仅仅是高度。我已经更新了片段。太棒了！我从来没有想过跨度的最大高度。