jquery - 如何在同一行对齐文本和表情？

Question

我正在为表情符号使用图像映射。当我输入 ':)' 时，它会转换为相应的 gif 笑脸图像。但是，问题是表情符号从文本中显得有点向上。如何将表情图像和文本对齐在同一行？我尝试使用 margin-top 和 padding-top，仍然完好无损。以下是用户名发送的消息的html代码：

<div class="message"><span class="userName">
      Username
    </span>
      : hiii 
    <img class="emoticonimg" src="emoticons/face-smile.png"></img>
</div>

这是用于将 :) 转换为表情图像的 JQuery 代码：

html = html.replace(emotes[emoticon][i], "<img src=\"" + icon_folder + "/face-" + emoticon + ".png\" class=\"emoticonimg\"/>", "g");

Answer 1

您可能正在寻找 cssvertical-align属性。

http://www.w3schools.com/CSSref/pr_pos_vertical-align.asp

如果图像高于行高，您可以尝试使用负边距：

margin: -3px 0;

Answer 2

CSS 属性vertical-align可能会做你想做的事。

这里的例子