如何水平居中表情符号？

Question

Unicode 表情符号字符似乎在非视网膜显示器上溢出了它的边界框，但它仍然在视网膜显示器上的字符边界内。那么如何在视网膜和非视网膜显示器上将表情符号水平居中 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 都只使用表情符号图像。这对我来说并不理想，因为它增加了包的大小并且需要一些额外的逻辑来处理 copy/paste.

Answer 1

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

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

以下是我所做的实验，这些实验引导我得出我的解决方案：https://codepen.io/faessler/pen/aRNOEY

如果有人有 better/less 肮脏的方法，我会很高兴听到。 :)

.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>

Answer 2

在我的例子中，width 比 font-size 稍微大一点就解决了问题。父级 div 以 flex 为中心。

div.emojiIcons {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

span.emoji {
  font-size: 24px;
  width: 26px;
}

Answer 3

这是一种更语义化的方法。

.emoji {
  display: flex;
  padding: 1rem;
  border: 1px solid black;
  position: relative;
}

.emoji::after {
  content: "";
  width: 1px;
  height: 100%;
  background-color: red;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%)
}

.align-center {
  /* vertically center. */
  align-items: center;
}

.justify-center {
  /* horizontally center. */
  justify-content: center;
}

<div class="emoji align-center justify-center">
  
</div>

如何水平居中表情符号？

How do I horizontally center an emoji?

css

emoji

这是一种更语义化的方法。