css - 图像在 TD 中未垂直对齐

Question

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

这是一张图片，可以让解释更容易：

我试图将 HTML 结构复制到 jsfiddle，但它在那里正确对齐。所以我相信这是一个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 对其进行样式设置。

.

score 1 · Accepted Answer

在我看来， 每张图片都被分成新的一行，因此出现了问题。

尝试：

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

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

或者

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

以防止细胞破坏任何线条。

score 0 · Accepted Answer

看到我已经根据您的要求对您的 CSS 进行了更改

2 回答 2