使表情符号更大并与文本对齐。

Question

这是我的表情符号 fiddle。

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

Css:

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

Answer 1

您想要的内容可以通过以下方式表达：垂直居中在基线上方字体 x 高度的一半处。为此，您需要解决 line-height。

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

用不同的 line-height 进行试验，看看图像排列在哪里。如果你合身，你就完成了。如果你仍然找不到到达那里，让自己靠近，然后在适当的地方给图像一个或两个像素的边距或填充顶部或底部。

Answer 2

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

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

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

jsFiddle Demo

Answer 3

您的内容应始终放置在 HTML 标签中，这些标签为您尝试构建的结构组件提供上下文。在下面的 fiddle 示例中，我们将表情符号封装在一个 span 标签中，该标签又包裹在一个 p 标签中，用于文字内容。通过这样做，我们可以将表情符号内容上的特定 CSS 定位为在 p 标签内垂直对齐，而无需处理 line-height。 font-size CSS 属性可以控制unicode字符和font-face内容。

更新 1
我现在看到您正在尝试将字符转换为图像；你的 jsfiddle 被破坏了，因为它没有使用 jquery 框架，你不必声明 onLoad；相反，这应该全部在 js 设置 window 窗格中设置。

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

使表情符号更大并与文本对齐。

Making emojis bigger and align with text.

html

javascript

css

emoji