如何将表情符号水平居中？

Question

似乎unicode表情符号字符在非视网膜显示器上溢出它的边界框,但它仍然在视网膜显示器上的字符边界内.那么如何在视网膜和非视网膜显示器上以水平方式将表情符号居中放置？

非视网膜:

视网膜:

这适用于视网膜屏幕,但在非视网膜显示屏上偏离了几个px:

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

这是一个CodePen来尝试https://codepen.io/anon/pen/GmzoNP.你需要一个视网膜和非视网膜屏幕来观察问题.

以下是我尝试过的一些想法.我还没有成功,但我认为最后两个是在正确的轨道上:

• 文字对齐中心(毕竟是文字)
• 宽度: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>