Question

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

非视网膜：

视网膜：

这适用于视网膜屏幕，但在非视网膜显示屏上偏离了几个像素：

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

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

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

文字对齐中心（毕竟是文字）
宽度：0，左边距50％，变换：translateX（-50％）...
更改字符宽度
使用等宽字体

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

Answer 1

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

我可以通过将字体大小提高到最小26px来使表情符号居中。最小字体大小为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>

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

1 个答案: