Блог

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

Как вы можете видеть на скриншоте, div имеет высоту 50 пикселей, а эмодзи — 50 пикселей в высоту, но голова выступает над div, а не находится в его идеальном вертикальном центре.

Вот скрипка.

Как вы можете видеть, мой div прост и содержит только код для эмодзи:

 <div>amp;#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, потому что их эмодзи совпадают с базовой линией шрифта.

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

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

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

Да и нет, небольшое смещение верхнего интервала здесь вызвано самим символом и должно быть скорректировано с помощью 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">amp;#x1F464;</div>

<br/>

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

Поместите текст в a 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>amp;#x1F464;</span>
</div>  

Вот как я бы подошел к этому. Размер шрифта на Mac, похоже, создает изображение размером более 50×50, что может быть причиной проблемы. Скрытие переполнения, по крайней мере, сделает изображение более согласованным.

 <div class="container">
  <div class="emoji">
      amp;#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/