Как визуально центрировать смайлик по горизонтали в Chrome?

Удивительно сложно визуально отцентрировать смайлик по горизонтали в Google Chrome, так как справа от смайлика есть пробелы там, где их быть не должно. Пример:

.avatar {
  width: 30px;
  
  padding: 10px;
  background-color: #eee;
  border-radius: 50%;
  
  display: grid;
  justify-items: center;
  align-items: center;
}
<div class="avatar">
  <div>&#x1F436;</div>
</div>

https://codepen.io/tommedema/pen/xxbXBRe

В Chrome 79.0.3945.79 на MacOS Catalina 10.15.2 это выглядит так:

Хром 79.0.3945.79

Ясно, что он визуально не центрирован по горизонтали. Однако в других браузерах, таких как Safari и Firefox 71, это:

Файрфокс 71

Что касается ответа Кэрол об использовании размера шрифта и размера окна, результат все тот же. Я выбрал смайлик/текст, чтобы вы могли более четко увидеть проблему наличия пробела справа от смайлика, но только в Chrome, а не в других браузерах:

Chrome с размерами коробки


html css unicode
person Tom    schedule 02.01.2020    source источник
comment
Вы пробовали с display: flex;justify-content: center;align-items: center;?   -  person Akhi Akl    schedule 02.01.2020
comment
@AkhiAkl да (codepen.io/tommedema/pen/MWYExXz), эффект тот же . Проблема в том, что смайлик кажется больше ширины, чем он визуально занимает (как будто за смайликом есть место)   -  person Tom    schedule 02.01.2020
comment
@ Василий, совсем нет. Если вы читаете мой вопрос, становится ясно, что это связано с тем, как Chrome отображает смайлики.   -  person Tom    schedule 02.01.2020
comment
смайлики - это текст, поэтому я не вижу никакой разницы между смайликами и чем-то еще!!   -  person Basil    schedule 02.01.2020
comment
ваш вопрос является дубликатом этого вопроса: stackoverflow.com/questions/42016125/   -  person Basil    schedule 02.01.2020
comment
Похоже, это проблема конкретного поставщика: забавно то, что в других браузерах на основе хрома, таких как Brave и Opera, этой проблемы нет. Кажется, это связано с тем, как Chrome кернит символ юникода.   -  person Terry    schedule 07.01.2020

Ответы (5)


arrow_upward
5
arrow_downward

Похоже, это старая ошибка рендеринга Chromium, которая особенно влияет на устройства Retina. Это может объяснить, почему некоторые другие авторы предлагают решения, которые вам не подходят!

См. отчет об ошибке здесь: https://bugs.chromium.org/p/chromium/issues/detail?id=551420. ETA на исправление, конечно же, нет...

Однако я наткнулся на кое-что интересное, играя с размерами шрифта. При больших размерах шрифта (около 22 пикселей в моем тестировании, но это может зависеть от множества факторов) проблема полностью исчезает.

Поэтому предлагаемое мной исправление является своего рода обходным путем, но оно должно быть безопасным и для других браузеров. Удвойте размер шрифта, но снова уменьшите его, используя transform:

.avatar {
  font-size: 30px;  /* double the size you wanted */
  ...
}

.avatar div {
  transform: scale(0.5);  /* reduce size by 50%, back to originally intended size */
}
person gwcodes    schedule 10.01.2020
comment
Это исправляет выравнивание h для высокого ppi, но также, кажется, нарушает его для низкого ppi, по крайней мере, для меня. Я советую проверить это перед отправкой кода с помощью этого обходного пути! - person bviala; 21.04.2020

arrow_upward
1
arrow_downward

Высота строки по умолчанию в каждом браузере разная.

Используйте стандартную высоту строки: 1; явно.

https://codepen.io/boralp/pen/wvByBXy

.avatar {
  width: 30px;

  font-size: 15px;
  box-sizing: content-box;

  line-height: 1;
  padding: 10px;
  background-color: #eee;
  border-radius: 50%;

  display: grid;
  justify-items: center;
  align-items: center;
}
person Bora Alp Arat    schedule 07.01.2020
comment
Вы сами проверяли на хроме 79? Это определенно не визуально по центру, а не по горизонтали - person Tom; 07.01.2020
comment
Да, я использую Chrome 79 на Mac. Попробуйте указать ширину и высоту коробки, она по-прежнему подходит как по горизонтали, так и по вертикали. - person Bora Alp Arat; 14.01.2020

arrow_upward
0
arrow_downward

попробуйте сделать это, используя свойство css по умолчанию display: block <div>, а чтобы центр содержимого располагался горизонтально, используйте text-align: center.

для большего понимания покажите следующий фрагмент:

.avatar {
    box-sizing: border-box;
    width: 50px;
    height: auto;
    padding: 10px;
    background-color: #eee;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
}
<div class="avatar">
  <div>&#x1F436;</div>
</div>

Я также проверяю Chrome 79. Он отлично работает.

Я надеюсь, что это сработает для вас и поможет решить вашу проблему.

Спасибо...

person KuldipKoradia    schedule 09.01.2020
comment
Я запустил ваш фрагмент кода, и он визуально не сосредоточен на Chrome 79 MacOS. Справа от символа смайлика есть пробел. - person Tom; 09.01.2020
comment
не могли бы вы поделиться каким-нибудь скриншотом для моего кода? потому что я проверил его для Mozila и Chrome как в Windows, так и в Mac OS, включая Safari. и он отлично работает как для ОС, так и для всех браузеров. - person KuldipKoradia; 10.01.2020

arrow_upward
0
arrow_downward

Используйте position: absolute; на эмодзи, затем вверху, влево до 50%, затем переведите -50%, чтобы поставить его в мертвую точку.

Здесь:

.container {
  display: flex;
  width: 100vw;
  justify-content: center;
}

.avatar {
  width: 30px;
  height: 30px;
  font-size: 15px;
  box-sizing: content-box;
  padding: 10px;
  background-color: #eee;
  border-radius: 50%;
  position: relative;
}

.avatar div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.avatar.x2 {
  width: 45px;
  height: 45px;
  font-size: 30px;
}

.avatar.x3 {
  width: 60px;
  height: 60px;
  font-size: 45px;
}
<div class="container">
  <div class="avatar">
    <div>????</div>
  </div>
  <div class="avatar x2">
    <div>????</div>
  </div>
  <div class="avatar x3">
    <div>????</div>
  </div>
</div>

person Lumi    schedule 10.01.2020

arrow_upward
-1
arrow_downward

Вам нужно добавить размер шрифта и размер окна:

  font-size:15px;
  box-sizing:content-box;

итак всего:

.avatar {
  width: 30px;

  font-size:15px; // new line of code
  box-sizing:content-box; // new line of code

  padding: 10px;
  background-color: #eee;
  border-radius: 50%;

  display: grid;
  justify-items: center;
  align-items: center;
}
person Carol McKay    schedule 02.01.2020
comment
Это не помогло. Я добавил раздел к исходному вопросу. - person Tom; 02.01.2020