css - 如何水平居中表情符号？

Question

在非 Retina 显示器上，Unicode 表情符号字符似乎溢出了它的边界框，但在 Retina 显示器上它仍然在字符边界内。那么，如何在视网膜和非视网膜显示器上将表情符号水平居中放置在 div 中？

非视网膜:

视网膜:

这适用于 Retina 屏幕，但在非 Retina 显示器上会偏离几个像素:

<div style="text-align: center; width: 3rem; border: 1px solid red;">😃</div>

这里有一个 CodePen 可以尝试一下 https://codepen.io/anon/pen/GmzoNP .您将需要视网膜和非视网膜屏幕来观察问题。

以下是我尝试过的一些想法。我还没有在他们身上取得成功，但我认为最后两个在正确的轨道上:

• Text-align center(毕竟是文字)
• 宽度:0，左边距 50%，变换:translateX(-50%)...
• 改变字符宽度
• 使用等宽字体

有关其他人如何解决此问题的一些背景信息 - Slack 和 Google 都只使用表情符号图像。这对我来说并不理想，因为它增加了包的大小，并且需要一些额外的逻辑来处理复制/粘贴。

Answer 1

我知道这个问题被问到已经有一段时间了，但我遇到了同样的问题，也许我的回答可以帮助别人。

我可以通过将字体大小提高到最小 26 像素来使表情符号居中。最小字体大小为 26px 时，表情符号以视网膜为中心，而不是视网膜屏幕。在我的最终解决方案中，我将字体大小提高到 4em，然后使用 transform: scale(0.25); 将其缩小。

以下是我所做的实验，这些实验使我找到了解决方案:https://codepen.io/faessler/pen/aRNOEY

如果有人有更好/更少脏的方法，我会很高兴听到。 :)

.fontSize span {
  display: inline-block;
  font-size: 26px;
}


/*BOX*/
.gridGroup {display:flex; margin-bottom:10px;}
.grid {position:relative; width:100px; height:50px; margin:0 10px 10px 0; border:1px solid blue; text-align:center;}
.grid:before {content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:2px; height:100%; background:red;}

<div class="gridGroup">
  <div class="grid fontSize"><span>😃</span></div>
  <div class="grid fontSize">bla <span>😃</span> bla</div>
</div>