Html CSS在表格中垂直居中单个td

是否有一种方法可以使单个td元素在表内垂直居中

吉尔
史密斯
吉尔
史密斯
吉尔
史密斯
前夕
杰克逊
94

您可以使用

行span

执行此操作。我确实需要改变一下html；将

添加到所有行，将值添加到第一行，将

列span

设置为需要应用的

数量

小提琴：

名字
姓氏
年龄
吉尔
史密斯
94
吉尔
史密斯
吉尔
史密斯
吉尔
史密斯
吉尔
史密斯
前夕
杰克逊

问题在于，您的94行位于特定行内，当前为底线，因此您的94位于底部

您可以尝试使用边距顶部，如下所示：

.center{
利润上限：-70px；
}

名字
姓氏
年龄
吉尔
史密斯
吉尔
史密斯
吉尔
史密斯
吉尔
史密斯
吉尔
史密斯
前夕
杰克逊
94

不完全是这样

• 可以在单元格内垂直居中放置内容
• 您可以使单元格跨越所有四行

将单元格移动到第一行并添加

rowspan

属性。然后应用

垂直对齐

CSS属性

.x{
垂直对齐：中间对齐；
}

吉尔
史密斯
94
吉尔
史密斯
吉尔
史密斯
前夕
杰克逊

尝试使用此JS.each函数。我在另一个答案中发现了这一点，找不到给予信用的用户。如果这一切正常，请告诉我，我将再次搜索

var seen = {};
$('#aTable td').each(function() 
{
    var $this = $(this);
    var index = $this.index();
    var txt =  $this.text();
    console.log(txt);
    if (seen[index] === txt) 
    {
        $($this.parent().prev().children()[index]).attr('rowspan', 2);
        $this.hide();
    }
    else 
    {
        seen[index] = txt;
    }
});

要使其工作，应在所有单元格中重复“94”（这是垂直对齐数据的基本思想，正确吗？使其成为公共值）。 之后，它基本上会合并，并保留单个值。

您可以使用以下方法：

td:nth-child(3) {
  position: relative;
  transform: translateY(calc(-100% * (6/2))); /*/number rows is 6 /*/
}

td:n个孩子（3）{
位置：相对位置；
转换：translateY（计算（-100%*（6/2））；
}

名字
姓氏
年龄
吉尔
史密斯
吉尔
史密斯
吉尔
史密斯
吉尔
史密斯
吉尔
史密斯
前夕
杰克逊
94

你的意思是什么？你的问题不清楚？？mybe您想使用

rowspan=“”或colspan=“”

？谢谢您的回答。我希望“94”在最后一列中居中。目前它位于底部。在我看来，用像素移动东西是一个绝望的举动，只有在没有其他解决方案的情况下才应该使用。正如您所说，它是无响应的，也不是动态的，因为如果向表中添加更多行，对齐将是错误的。我100%同意，但在这种情况下，它可以工作，即使@RMo解决方案是最好的

td:nth-child(3) {
  position: relative;
  transform: translateY(calc(-100% * (6/2))); /*/number rows is 6 /*/
}