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

Question

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

正如你在屏幕截图中看到的那样，div是50px高，而表情符号是50px高，但是头部伸出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居中，你可以在那里找到其他一些你可以在这里看到的样式。

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上的字体大小似乎会创建一个大于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>