如何在 Chrome 中将表情符号在视觉上水平居中？

Question

在谷歌浏览器中将表情符号在视觉上水平居中是非常困难的，因为表情符号右侧似乎不应该有空格。一个例子：

.avatar {
  width: 30px;
  
  padding: 10px;
  background-color: #eee;
  border-radius: 50%;
  
  display: grid;
  justify-items: center;
  align-items: center;
}

<div class="avatar">
  <div>&#x1F436;</div>
</div>

https://codepen.io/tommedema/pen/xxbXBRe

在 MacOS Catalina 10.15.2 上的 Chrome 79.0.3945.79 中，这呈现为：

显然，它在视觉上不是水平居中的。然而在 Safari 和 Firefox 71 等其他浏览器中却是：

关于 Carol 的使用 font-size 和 box-sizing 的回答，结果还是一样的。我选择了表情符号/文本，以便您可以更清楚地看到表情符号右侧有空格的问题，但仅限于 Chrome 而不是其他浏览器：

Answer 1

这似乎是一个旧的 Chromium 渲染错误，专门影响 Retina 设备。这或许可以解释为什么其他一些海报提出的解决方案对您不起作用！

在此处查看错误报告：https://bugs.chromium.org/p/chromium/issues/detail?id=551420。当然，修复中没有预计到达时间...

不过，我偶然发现了一些有趣的字体大小。在较大的字体大小（我的测试中大约为 22 像素，但这可能取决于多种因素）时，问题完全消失了。

因此，我建议的修复是一种解决方法，但对于其他浏览器也应该是安全的。将字体大小加倍，但使用 transform 再次缩小：

.avatar {
  font-size: 30px;  /* double the size you wanted */
  ...
}

.avatar div {
  transform: scale(0.5);  /* reduce size by 50%, back to originally intended size */
}

Answer 2

在表情符号上使用position: absolute;，然后在顶部，向左到 50%，然后翻译 -50% 使其处于死点。

这里：

.container {
  display: flex;
  width: 100vw;
  justify-content: center;
}

.avatar {
  width: 30px;
  height: 30px;
  font-size: 15px;
  box-sizing: content-box;
  padding: 10px;
  background-color: #eee;
  border-radius: 50%;
  position: relative;
}

.avatar div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.avatar.x2 {
  width: 45px;
  height: 45px;
  font-size: 30px;
}

.avatar.x3 {
  width: 60px;
  height: 60px;
  font-size: 45px;
}

<div class="container">
  <div class="avatar">
    <div>?</div>
  </div>
  <div class="avatar x2">
    <div>?</div>
  </div>
  <div class="avatar x3">
    <div>?</div>
  </div>
</div>

Answer 3

尝试使用display: block 的默认css 属性<div> 进行此操作，并使内容中心水平使用text-align: center。

为了更多的理解显示下面的sn-p：

.avatar {
    box-sizing: border-box;
    width: 50px;
    height: auto;
    padding: 10px;
    background-color: #eee;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
}

<div class="avatar">
  <div>&#x1F436;</div>
</div>

我还检查了 Chrome 79。它工作正常。

我希望这对您有用并有助于解决您的问题。

谢谢...

Answer 4

每个浏览器的默认行高都不一样。

使用标准行高：1；明确的。

https://codepen.io/boralp/pen/wvByBXy

.avatar {
  width: 30px;

  font-size: 15px;
  box-sizing: content-box;

  line-height: 1;
  padding: 10px;
  background-color: #eee;
  border-radius: 50%;

  display: grid;
  justify-items: center;
  align-items: center;
}

Answer 5

您需要添加字体大小和框大小：

  font-size:15px;
  box-sizing:content-box;

总而言之：

.avatar {
  width: 30px;

  font-size:15px; // new line of code
  box-sizing:content-box; // new line of code

  padding: 10px;
  background-color: #eee;
  border-radius: 50%;

  display: grid;
  justify-items: center;
  align-items: center;
}