Изображение не выровнено по вертикали в TD

Question

У меня есть таблица, в которой каждый из ее TD содержит изображение (точнее, смайлик), которые имеют одинаковую высоту. Как ни странно, они неправильно выровнены. Один смайлик находится наверху, другой - посередине, а другой - внизу.

Вот фотография, чтобы сделать объяснение проще:

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

Я попытался скопировать структуру HTML для jsfiddle, но it is properly aligned in there. Поэтому я считаю, что это проблема CSS.

Однако моя попытка изменить все результаты не имеет смысла. Я не могу правильно выровнять его. Я попробовал vertical-align:middle и попытался установить padding и margin, но я не могу заставить его правильно выровнять.

Помощи ли это?

EDIT: получается, что этот CSS является тот, который делает проблему:

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

Когда я удалить overflow: auto, он показывает, как я хочу, чтобы это было. Но проблема здесь: мне нужен overflow:auto, чтобы сделать полосу прокрутки, поэтому, если в таблицу добавлено больше смайликов, она не будет превышать определенную высоту.

EDIT 2: Я предполагаю, что это не overflow: auto, который вызывает проблему, так как он просто работает нормально в скрипку (как показано на Sheilender)

Отказ от ответственности: Я не могу изменить HTML структуры (в случае, если кто-то предложит это). У меня нет доступа к шаблону HTML, и я могу только стилизовать его с помощью CSS.

.

Answer 1

кажется мне, как   после каждого изображения была нарушена на новой линии, следовательно, проблемы.

Try:

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

Это должно сделать ячейку достаточно широким, чтобы вместить образ и  

или

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

Чтобы предотвратить клетки от разрушения каких-либо линий.

Answer 2

см я были внесены изменения в соответствии с вашими требованиями с помощью CSS

http://jsfiddle.net/uxyjg/14/

you can read more about vertical center content