在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的图像，这可能是问题的根源。隐藏溢出，至少将使图像更加一致。

#clan-profile {
  background-image: url(http://placekitten.com/500/200);
  height: 300px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-filter: blur(5px);
  /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}

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

Answer 3

是，不是，这里的顶部间距有些偏移是由字形本身引起的，需要通过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>

Answer 4

我将样式移动到添加的围绕子字形的子元素上。我删除了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>