css - align text below image in a span

Question

I want to show text below image in these spans and spans do not jump to new line:

<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;

any suggestion?

Answer 1

DEMO

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