css - TD で画像が縦に整列していない

Question

各 TD に同じ高さの画像 (より正確には絵文字) が含まれるテーブルがあります。奇妙なことに、それらは適切に整列されていません。1 つの顔文字が上、もう 1 つは中央、もう 1 つは下にあります。

説明を簡単にするために、次の図を示します。

HTML 構造を jsfiddle にコピーしようとしましたが、そこに適切に配置されています。したがって、これはCSSの問題だと思います。

しかし、すべてを変更しようとしても無駄です。うまく並べることができません。vertical-align:middleとを設定しようpaddingとしましたが、margin正しく整列させることができません。

これを行うための助けはありますか？

編集:この CSS が問題を引き起こしていることが判明しました:

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

を削除するとoverflow: auto、希望どおりに表示されます。しかし、ここでの問題:overflow:autoスクロールバーを作成する必要があるため、テーブルにさらに絵文字が追加された場合でも、定義された高さを超えません。

EDIT 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