使表情符號變大並與文字對齊。

如何調整的表情符號，並使其與文本中心對齊，使它看起來整潔。

的CSS：

img.emojione { 
// Override any img styles to ensure Emojis are displayed inline 
margin: 0px !important; 
display: inline !important; 
}

來源

2016-01-04 Zack

對我來說很好，你有截圖來展示你想要的東西嗎？ –

你試過在'img.emojione'上設置一個'height'嗎？ –

我想讓emojis稍微小一點，並將它與文字中間對齊。 – Zack

您的內容應該始終放置在HTML標籤中，該標籤爲您正在嘗試構建的結構組件提供上下文背景在下面的小提琴示例中，我們將表情符號封裝在span標籤wh反過來，它又被包裹在用於措詞內容的p標籤中。通過這樣做，我們可以針對表情符號內容的特定CSS在p標籤內垂直對齊，而不必處理行高。字體大小的CSS屬性可以控制Unicode字符和字體內容。

更新1
我現在看到您正試圖將字符轉換爲圖像;你的jsfiddle被破壞了，因爲它沒有使用jquery框架，你不必聲明onLoad;相反，這應該都設置在js設置窗口中。

更新2：更新的jsfiddle

例 https://jsfiddle.net/L8a9zazh/15/

HTML

<br><br> 
<p>Hello world I'm buzz </p> 
<br><br> 

<p id="wrong-test">Hello world I'm buzz <span class="emoji"></span></p>

CSS

img.emojione { 
    // Override any img styles to ensure Emojis are displayed inline 
    margin: 0px !important; 
    display: inline !important; 

    height: auto; 
    width: 50px; 
} 

p#wrong-test { 
    border-top: 1px solid black; 
    border-bottom: 1px solid black; 
    display: inline-block; 
} 

span.emoji { 
    font-size: 30px; 
    vertical-align: middle; 
    line-height: 2; 
}

來源

2016-01-04 15:46:17

謝謝。但是當人們添加表情符號時，他們不會將它與結合起來，他們只是添加它，這就是爲什麼我問這個問題。 – Zack

這是因爲內容編輯器的限制嗎？我會假設你至少可以放在一個p標籤內？我更新了我的jsfiddle，以便emoji JS能夠正常工作 –

像你想會是由以下表示這聽起來：在一個點的字體的x高度的一半高於基線垂直居中。爲此，您需要註冊行高。

如果圖像大小超過字體的行高，則文本和內嵌圖像將永遠不會垂直對齊。您需要使字體的行高爲至少等於圖像高度。

用不同的線條高度進行實驗，看看圖像排列在哪裏。如果你身體健康，就完成了。如果仍然無法找到，請將自己關閉，然後在適當的位置爲圖像指定一個或兩個邊距或填充頂部或底部。

來源

2016-01-04 15:31:47 Robusto

你可以用你的表情符號在一個容器元素（如<div>或<span>和風格元素，如：

<div style="font-size:5rem;width:100%;text-align:center;"></div>

我這樣做是爲您的jsfiddle，在這裏：

jsFiddle Demo

來源

2016-01-04 15:43:00 gibberish

謝謝。但是當人們添加表情符號時，他們不會將它與結合起來，他們只是添加它，這就是爲什麼我問這個問題。 – Zack

使表情符號變大並與文字對齊。

回答

相關問題