在 Mac 上的 div 中垂直对齐表情符号

Question

是否可以在 Mac 上的 div 中完美地垂直对齐表情符号？

正如您在屏幕截图中看到的，div 高 50 像素，表情符号高 50 像素，但头部突出在 div 上方，而不是完全垂直居中。

这是小提琴。

如您所见，我的 div 很简单，仅包含表情符号的代码：

<div>&#x1F464;</div>

我尝试向 div 添加一堆垂直居中样式无济于事：

div {
  width: 50px;
  height: 50px;
  background-color: #f00;
  font-size: 50px;
  line-height: 50px;
  display: flex;
  align-self: center;
  justify-content: center;
  align-items: center;
  vertical-align: center;
}

奇怪的是，上面的代码在 Windows 上呈现得非常好，因为它们的表情符号与字体的基线对齐。

Answer 1

将文本放入 a 中span，以便您可以将其与div. 然后删除弹性盒居中，您可以将其与其他一些样式一起放入其中，您可以在此处看到。

div {
  width: 50px;
  height: 50px;
  background-color: #f00;
}
div span {
  display: inline-block;
  font-size: 50px;
  line-height: 50px;
  text-align: center;
  padding-top: 7px;
}

<div>
  <span>&#x1F464;</span>
</div>