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

Answer 2

你可以试试这个代码。正如您所看到的，我制作了一个没有边框的表格，可以根据您的需要显示图像。

<table id="yourid" border="0">
 <tr>
    <td width="50%">
        <span class="smileycode" id=":sm:"><img src="http://i.imgur.com/ngS6rsb.png"></span>
        </td>
    <td width="50%"><span class="smileycode" id=":sq:"><img src="http://i.imgur.com/ngS6rsb.png"></span>
        </td>
  </tr>
  <tr>
    <td width="50%">
        :sm:
    </td>
    <td width="50%">:sq:
    </td>
  </tr>

工作示例：小提琴