艰难的CSS问题 - 如何在href中向下移动图像或文本？

Question

我有一个令人沮丧的CSS问题 - 基本上我有一个图像需要完全内联（不高于或低于）文本，我在一个href内。 HTML -

<li><a href="../php/updatestatus.php?update=true&link11=<?=$uniqid?>"><img class= "emoji" src="../images/emojis/1f642.png"/><p class="emojiText">Pretty good</p></a></li>

产生这个：

您可以看到图像尺寸合适但距离文字稍远。我重新安排了我的html并将文本粘贴在自己的<p>内，移动了图像，所有内容。没有任何效果。我目前的CSS：

.emoji {
    height: 18px;
    width: 18px;
    margin-top: 8px;
    margin-right: 8px;
    margin-left: 5px;
}
.emojiText {
  margin-bottom: 10px;
    display: inline;
}

.status li a { 
    text-indent: 5px;
    display: block; 
    width: 250px;
color: white;
    height: 35px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    text-align: left;

 -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.1);

    position: relative;
    padding-top: 0px;
    text-decoration: none;
}

最后一个块会影响两者，但无论我如何使用边距，我都无法解决图像文本对齐问题。我该怎么做才能解决这个问题？

编辑：

Answer 1

如果你想让表情符号和文字对齐它们的中心点......

.emoji,
.emojiText {
    display: inline-block;
    vertical-align: middle;
}

Answer 2

这就是你所期待的......

<style>
a { display:inline-block; background:#52D4A4; text-align:center; text-decoration:none; padding:10px; }
a img { display:block; margin:0 auto; }
</style>

<a href="#"><img src="http://www.cmegroup.com/etc/designs/cmegroup/cmegroupClientLibs/images/iconFacebook.png">Pretty good</a>