難しい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; 
} 

最後のブロックは、両方の影響が、私は余白と遊ぶどんなに私は、画像・テキストの整列問題を解決することはできません。これを修正するにはどうすればよいですか？

EDIT：

Answer 1

これは...あなたが期待するものである

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

Answer 2

あなたは自分の中心点を揃えるために絵文字やテキストをしたい場合は...

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