Question

我有一张桌子，其中每个TD包含具有相同高度的图像（更确切地说，表情符号）。奇怪的是，它们没有正确对齐。一个图释在顶部，另一个在中间，另一个在底部。

这是一张让解释更容易的图片：

我尝试将HTML结构复制到jsfiddle，但是it is properly aligned in there。所以我认为这是一个CSS问题。

然而，我试图修改一切导致无济于事。我无法正确对齐。我尝试vertical-align:middle并试图设置padding和margin，但我无法正确对齐。

有没有帮助呢？

编辑：事实证明这个CSS就是出现问题的那个：

.emotlist {
overflow: auto;
height: 175px;
width: 120px;
}

当我删除overflow: auto时，它会按我希望的那样显示。但问题在于：我需要overflow:auto来制作滚动条，所以如果表中添加了更多表情符号，它将不会超过定义的高度。

编辑2：我想这不是导致问题的overflow: auto，因为它在小提琴中工作正常（如Sheilender所示）

免责声明：我无法更改HTML结构（如果有人建议的话）。我无权访问HTML模板，我只能通过CSS设置样式。

Answer 1

在每个图像被打破到一个新行之后看起来像 因此出现问题。

尝试：

.emotlist table tr td {
   width: 25px;
}

这应该使单元格足够宽以容纳图像和 

或

.emotlist table tr td {
    white-space: nowrap;
}

防止细胞破坏任何细胞。

Answer 2

看到我已根据您的要求使用您的css进行了更改