Why do the browsers render center aligned text differently at different resolutions?

Question

I have a "notification bell" on my website and a number in it (how many notifications you have). That number is in the middle until about 1200px, then it goes slightly to the left (1px). Looking closely with Photoshop, the text becomes 1px smaller. How, and why is this happening?

Tested in Chrome.

EDIT 4: So this turned out to really be a rendering issue only. Nothing can be done by CSS.

EDIT 3: This is just getting weirder. I added display: inline-block after removing float, but it became wrong again. However removing float: left, and removing the menu option this is paired with, brings the issue back. Aww... :(

EDIT 2: it seems I found the cause. This is in the menu for me, and the menu items have float: left. I removed the float left (of course it's a mess now), but the number went exactly to the middle. No idea though why this doesn't happen at lower resolutions.

EDIT: Added screenshot! On the left, it's the smaller resolution, the "0" is in the middle, but on the right with bigger resolution it's 1px to the left. I know it's barely visible, but it annoys me.

Some html:

<span class="open_notifs main notif"><span class="item">0</span></span>

Here's some CSS too:

#cs_menu span {
    position: relative;
    display: inline-block;
    outline: 0;
    color: #FFF;
    text-decoration: none;
    letter-spacing: 1px;
    text-shadow: 0 0 1px rgba(255,255,255,.3);
    font-size: 14px;
    cursor: pointer;
    height: 35px;
    line-height: 35px;
}

#cs_menu span.notif {
    background: url(/images/notif-bell.png) no-repeat;
    padding: 0;
    margin: 0 4px;
}

#cs_menu span.item {
    padding-left: 0;
    padding-right: 0;
    width: 30px;
    text-align: center;
    line-height: initial;
    letter-spacing: 0px;
}

add screen shots of the browsers views... with the dev panel open showing the css. — Seabizkit, Jan 14 '20 at 12:14
looks like the zero in the lower picture is an odd amount of pixels and therefore the centring will be off to the left 1px where as the zero in the first picture is even so the centre can be directly in the middle. Must be just the way the font renders for each resolution — Pete, Jan 14 '20 at 12:14
@Pete I think the OP is trying to ask why the same character in the same size is displaying differently at higher resolutions. And "That's just the way it is" is not a very satisfying answer. — Mr Lister, Jan 14 '20 at 14:09
That's why it's a comment @MrLister if I had an answer I would have answered - might be better to ask that question on graphic design stack exchange where they have more understanding of fonts and rendering — Pete, Jan 14 '20 at 14:09
I know it's just 1 px and probably 99% of the people don't care, yet it's driving me crazy, because I can see it. — Jones, Jan 14 '20 at 17:05
What about antialiasing the font: https://stackoverflow.com/questions/17864742/how-to-apply-font-anti-alias-effects-in-css maybe this is what you need? — Zydnar, Jan 14 '20 at 19:10
@Zydnar Unfortunately that didn't help, but it seems I found the cause. This is in the menu for me, and the menu items have float: left. I removed the float left (of course it's a mess now), but the number went exactly to the middle. No idea though why this doesn't happen at lower resolutions. — Jones, Jan 14 '20 at 19:18
Well, I gave up, it's just 1px... If someone wants to play with it, it's at https://hearthstonehungary.hu - you have to register first (Hungarian)! — Jones, Jan 14 '20 at 20:04

score 0 · Answer 1 · answered Jan 14 '20 at 20:44

I seen some issue in your html and css code. Your CSS is overwritten many times. span tag is conflict with CSS code. You can replace the notification icon and text between div and span. I use flexbox to fix this issue. Also you haven't write complete code for background image.

HTML

<div class="notificaiton-icon">
    <span>0<span>
</div>

CSS

.notificaiton-icon{
  align-items: center;
  background-attachment: scroll;
  background-image: url(https://hearthstonehungary.hu//images/notif-bell.png);
  background-color: transparent;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: row;
  height: 36px;
  justify-content: center;
  width: 30px;
}
.notificaiton-icon span{
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 1;
}

Here is the Pen.

Note: use fresh element for this notification icon and text avoid to conflict css overwritten issue. Use flexbox it will help you to center vertically and horizontally.

Thanks for doing this. However this just proves that this is only a rendering issue. I made one modification in your code: I set the .main-container to 40px width: https://codepen.io/Phoenixy/pen/wvBxyQq - It's still good, but if I set it to 41px, it's bad: https://codepen.io/Phoenixy/pen/OJPwQam ... It's good at 42px, bad at 43px, good at 44, bad at 45, so on... — Jones, Jan 15 '20 at 06:20

Why do the browsers render center aligned text differently at different resolutions?

1 Answers1