使emojis更大并与文本保持一致。

Question

这是我的表情符号。

https://jsfiddle.net/L8a9zazh/

如何调整表情符号的大小并使其与文本对齐并使其看起来整洁。

Css：

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

Answer 1

您的内容应始终放在HTML标记中，以便为您要构建的结构组件提供上下文。在下面的小提琴示例中，我们将表情符号封装在span标记内，而span标记又包含在用于措辞内容的p标记中。通过这样做，我们可以将表情符号内容上的特定CSS定位到p标签内的垂直对齐，而无需处理行高。 font-size CSS属性可以控制unicode字符和font-face内容。

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

Answer 2

您想要的声音将通过以下方式表达：垂直居中于基线上方字体x高度的一半。为此，您需要解决行高。

如果图像大小超过字体的行高，则文本和内嵌图像将永远不会垂直对齐。您需要使字体的行高至少等于图像高度。

尝试不同的线高，看看图像的排列方式。如果你身体健康，你就完成了。如果您仍然无法找到目标，请让自己靠近，然后在适当的位置给图像一个或两个边距或填充顶部或底部。

Answer 3

您可以将表情符号包装在容器元素（例如<div>或<span>中，并设置该元素的样式，例如：

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

我为你的jsFiddle做了这个，在这里：

jsFiddle Demo