艱難的CSS問題 - 如何在href內移動圖像或文本？

我有一個令人沮喪的CSS問題 - 基本上我有一個圖像需要完全內聯（不在上面或下面）文本，我已經在一個href。 HTML的艱難的CSS問題 - 如何在href內移動圖像或文本？

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

最後一塊影響到兩者，但無論我如何使用邊距我都無法修復圖像文本對齊問題。我能做些什麼來解決這個問題？

編輯：

來源

2016-07-01 skyguy

這會很好，如果你設置一個jsfiddle – Jonathan

你試過vertical-align：middle ;?最後一個區塊移動的原因是您將這些樣式應用於同時包含圖片和文字的標籤 – Cruiser

在哪個選擇器上？ .emoji？ – skyguy

這是你期待什麼？

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

來源

2016-07-01 20:44:56 Nehemiah

不要看我的問題，我發佈了一個圖片。將文字向下移動 – skyguy

如果你想要表情符號和文本對齊其中心點......

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

來源

2016-07-01 20:59:19 relic

這裏是小提琴，以支持您的回答https://jsfiddle.net/2zu3zt9d/1/ – Cruiser

艱難的CSS問題 - 如何在href內移動圖像或文本？

回答

相關問題