выровнять по вертикали эмодзи в div на Mac

Question

Возможно ли идеально и вертикально выровнять эмодзи в div на Mac?

Как вы можете видеть на скриншоте, div имеет высоту 50px, а emoji - 50px, но голова торчит над 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

Я переместил стили в дочерний элемент, который я добавил, чтобы окружить глиф. Я удалил свойство 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 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

Да и нет, небольшой сдвиг в верхнем интервале здесь вызван самим глифом и должен быть настроен с помощью 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

Поместите текст в 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>