让表情符号变大并与文本对齐。

Question

这是我的Emoji One fiddle。

https://jsfiddle.net/L8a9zazh/

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

CSS：

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

- Zack

---

我觉得没问题，你有截图可以展示你想要的吗？ - Sandeep Bansal

你尝试在 img.emojione 上设置 height 了吗？ - Ex-iT

我想把表情符号变小一点，并将其与文本垂直居中对齐。 - Zack

我现在正在使用手机，不能做太多事情。 - Zack

Answer 1

您的内容应始终放置在给出所构建的结构组件上下文的HTML标记内。在下面的fiddle示例中，我们将表情符号封装在span标记内，然后将其包装在p标记中以获取文字内容。通过这样做，我们可以针对表情符号内容上的特定CSS进行垂直对齐，而无需处理行高。font-size CSS属性可以控制Unicode字符和字体内容。

更新1： 我现在看到你正在尝试将字符转换为图像；你的jsfiddle是损坏的，因为它没有使用jquery框架，并且你不必声明onLoad；相反，所有这些都应该在js设置窗格中设置。

更新2： 更新了jsfiddle。

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

- Ben Sewards

---

谢谢。但是当人们添加表情符号时，他们不会将其用<span>标签包装起来，而只是直接添加进去，这就是为什么我提出了这个问题。 - Zack

这是因为内容编辑器的限制吗？我认为你至少可以将它们都放在一个p标签内，我已经更新了我的jsfiddle，以便表情符号JS可以工作。 - Ben Sewards

Answer 2

您所需的内容可通过以下方式表达：垂直居中于字体 x 高度一半的基线之上。为此，您需要处理行高（line-height）。如果图像大小超过字体的行高，则文本和内联图像永远无法在垂直方向上对齐。您需要将字体的行高设置为至少等于图像的高度。尝试不同的行高值，看看图像是否对齐。如果符合要求，就完成了。如果仍然不能实现，请将图片与相应位置留出一个像素或两个像素的顶部或底部空白。

- Robusto

Answer 3

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

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

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

jsFiddle演示

- cssyphus

---

谢谢。但是当人们添加表情符号时，他们不会用<span>将其包裹起来，而是直接添加，这就是我提出这个问题的原因。 - Zack

这实际上是一个很好的答案，并且对我有用。我只是使用了 CSS 类别，而不是内联示例。 - 29er