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

Question

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

为了便于解释，这里有一张图片:

http://i.imgur.com/ITbBp.png

我试图将 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 导致了问题，因为它在 fiddle 中工作正常(如 Sheilender 所展示的)

免责声明:我无法更改 HTML 结构(以防有人建议)。我无权访问 HTML 模板，我只能通过 CSS 设置样式。

.

Answer 1

在我看来，每张图片都换行后出现了  ，因此出现了问题。

尝试:

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

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

或

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

防止单元格断线。