Question

I have a table in which each of its TD contains image (more precisely, emoticon) which have same height. Oddly, they are not properly aligned. One emoticon is at the top, the other is at the middle, and the other is at bottom.

Here is a picture to make the explanation easier:

https://i.stack.imgur.com/UeVpY.png

I tried to copy the HTML structure to jsfiddle, but it is properly aligned in there. So I believe this is a CSS problem.

However, my try to modify everything results in no avail. I cannot make it aligned properly. I tried vertical-align:middle and tried to set the padding and margin but I cannot make it align properly.

Is there any help to do this?

EDIT: it turns out that this CSS is the one that is making the problem:

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

When I remove the overflow: auto, it displays as I want it to be. But the problem here: I need the overflow:auto to make scrollbar, so in case there are more emoticons added to the table, it will not exceed the defined-height.

EDIT 2: I guess it is not the overflow: auto which is causing the problem, since it is just working fine in the fiddle (as demonstrated by Sheilender)

Disclaimer: I cannot change the HTML structure (in case someone suggest so). I don’t have access to the HTML template and what I can do is only style it via CSS.

.

Answer 1

Looks to me like the   after each image is being broken to a new line hence the problems.

Try:

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

This should make the cell wide enough to accomodate the image and the  

or

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

To prevent the cell from breaking any lines.