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

Question

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

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

这里是fiddle。

如您所见，我的 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

将文本放在span 中，这样您就可以将其与div 分开定位。然后移除 flexbox centering，你可以在这里看到其他样式。

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>

Answer 2

以下是我的处理方法。 mac 上的 font-size 似乎创建了大于 50x50 的图像，这可能是问题的根源。隐藏溢出，至少会使图像更加一致。

<div class="container">
  <div class="emoji">
      &#x1F464;
  </div>
</div>

.container {
  width: 50px;
  height: 50px;
  background-color: #f00;
  overflow: hidden;
}
.emoji {
    font-size: 50px;
    width: 50px;
    height: 50px;
}

https://jsfiddle.net/pg46v8j3/2/

Answer 3

我将样式移到了我添加以围绕字形的子元素中。我删除了line-height 属性，因为它会影响跨浏览器渲染，并添加了少量底部填充来弥补字形本身的自然间隙空间。我还添加了CSS Variable 以尽量减少重复值的重复。这使得在不同尺寸下进行测试变得更加容易。在 Mac Firefox/Chrome/Safari（所有最新版本）中测试。

div {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 1em;
}

.small {
  --symbol: 50px;
}

.medium {
  --symbol: 100px;
}

.large {
  --symbol: 150px;
}

div span {
  --symbol: 50px;
  width: var(--symbol);
  height: var(--symbol);  
  font-size: var(--symbol);
  background-color: #f00;
  padding-bottom: 0.06em;
}

<div>
  <span class="small">&#x1F464;</span>
</div>

<div>
  <span class="medium">&#x1F464;</span>
</div>

<div>
  <span class="large">&#x1F464;</span>
</div>

Answer 4

是也不是，这里顶部间距的一点点偏移是由字形本身引起的，需要通过transform: translate或负边距进行调整。

div {
  position: relative;
  font-size: 2rem;
  border: red 1px solid;
  height: 5rem;
  width: 5rem;
}

#div1:after {
  content: '?';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

#div2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

#div3 {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

Yep...
<div id="div1"></div>

<br/>

Yep again.
<div id="div2">&#x1F464;</div>

<br/>

And yep again.
<div id="div3">&#x1F464;</div>