html - css - 在跨度内对齐图像下方的文本

Question

我想在这些跨度中显示图像下方的文本，并且跨度不跳到新行:

<span class="smileycode" id=":sm:">
    <img src="images/smiley/sm.png">:sm:
</span>&nbsp;
<span class="smileycode" id=":sq:">
    <img src="images/smiley/sq.png">:sq:
</span>&nbsp;

有什么建议吗？

Answer 1

DEMO

.smileycode{
  display:inline-block;
}
.smileycode img{
  display:block;
}