如何在同一行中对齐文本和表情符号？

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

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

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

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

margin: -3px 0;

Answer 2

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

Example here