7

It is surprisingly hard to visually horizontally center an emoji in Google Chrome, as there appears to be whitespace to the right of the emoji where there shouldn't be. An example:

.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

In Chrome 79.0.3945.79 on MacOS Catalina 10.15.2 this renders as:

Chrome 79.0.3945.79

Clearly it's not visually horizontally centered. Yet in other browsers like Safari and Firefox 71 it is:

Firefox 71

Regarding Carol's answer of using font-size and box-sizing, the result is still the same. I've selected the emoji/text so you can more clearly see the issue of there being whitespace to the right of the emoji, but only on Chrome and not on other browsers:

Chrome with box-sizing

Tom
  • 8,536
  • 31
  • 133
  • 232
  • Have you tried with `display: flex;justify-content: center;align-items: center;`? – Akhi Akl Jan 02 '20 at 04:36
  • @AkhiAkl yes (https://codepen.io/tommedema/pen/MWYExXz), it has the same effect. The problem is that the emoji seems to have more width that it visually occupies (it's like there is a space behind the emoji) – Tom Jan 02 '20 at 05:02
  • @Basil, not at all. If you read my question it’s clear that this is specific to the way Chrome renders emojis – Tom Jan 02 '20 at 06:27
  • emojis are text so i don't see any deference between emojis and anything else!! – Basil Jan 02 '20 at 06:28
  • your question is a duplicate of this question:https://stackoverflow.com/questions/42016125/emoji-rendered-in-chrome-have-different-widths-than-in-other-browsers – Basil Jan 02 '20 at 06:37
  • 1
    It does appear to be a vendor-specific issue: the funny thing is that other chromium-based browsers such as Brave and Opera do not have this problem. It seems to do with how Chrome kerns the unicode character. – Terry Jan 07 '20 at 01:28

5 Answers5

7

This appears to be an old Chromium rendering bug that specifically affects Retina devices. That might explain why some other posters are suggesting solutions that don't work for you!

See the bug report here: https://bugs.chromium.org/p/chromium/issues/detail?id=551420. There's no ETA on a fix, of course...

I have stumbled across something interesting playing around with font sizes though. At larger font sizes (approx 22px in my testing, but this might be dependent on a variety of factors), the problem goes away entirely.

Therefore, my suggested fix is a bit of a workaround, but should be safe for other browsers too. Double the font size, but scale it down again using 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 */
}
gwcodes
  • 5,632
  • 1
  • 11
  • 20
  • 1
    It does fix the h alignment for high ppi but also seems to break it for low ppi, at least for me. I advise to check it before shipping code with this workaround ! – bviala Apr 21 '20 at 02:38
1

The default line-height of each browser is different.

Use standard line-height: 1; explicitly.

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;
}
Bora Alp Arat
  • 2,185
  • 3
  • 16
  • 21
  • Did you check it yourself on chrome 79? It definitely isn't visually centered, not horizontally – Tom Jan 07 '20 at 18:20
  • Yes I did, I'm using Chrome 79 on Mac. Try giving width and height to the box, it is still both horizontally and vertically fitting. – Bora Alp Arat Jan 14 '20 at 15:02
0

try to make this using display: block default css property of <div>, and to make content center horizontally use text-align: center.

for more understanding show following snippet:

.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>

I also check for the Chrome 79. It's works fine.

I hope this will works for you and help to solve your problem.

Thank you...

KuldipKoradia
  • 3,005
  • 7
  • 20
  • I ran your code snippet and it is not visually centered on Chrome 79 MacOS. There's whitespace to the right of the emoji character. – Tom Jan 09 '20 at 16:41
  • can you please share any screen cast for my code? because I have checked it for mozila and chrome both also in windows and mac OS including safari. and it works fine for both the OS and all browsers. – KuldipKoradia Jan 10 '20 at 05:34
0

Use position: absolute; on emoji then top, left to 50% then translate -50% to get it dead center.

Here:

.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>
Lumi
  • 439
  • 2
  • 8
-1

You need to add font size and box sizing:

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

so in total:

.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;
}
Carol McKay
  • 2,438
  • 1
  • 15
  • 15