I'm attempting to vertically center some text within a speech bubble, and I've achieved this using the position: absolute method with a specified top value on the text wrapper element. However, upon zooming in and out in the browser window, the text seems to shift slightly up and down in relation to the bubble. Regardless of the top value I use, the text doesn't appear centered vertically at all zoom levels.
For example, here is the appearance at 75% zoom in Chrome: 75-percent-zoom
And here it is at 80% zoom in Chrome: 80-percent-zoom
You'll notice that in the 75% zoom screenshot, the text looks too high compared to the bubble.
Previously, I tried using px values for sizes and position, but encountered the same issue. Hence, I switched to using em, which hasn't seemed to solve the problem either.
<body>
<div id="container">
<img id="bubble" src="img/bubble.svg">
<span id="text-wrapper">
<p>888</p>
</span>
</div>
</body>
#container {
position: relative;
font-size: 100px;
width: 4em;
height: 3em;
}
#text-wrapper {
position: absolute;
top: 0.332em;
left: 0.85em;
height: 1em;
font-size: 0.5em;
line-height: 100%;
z-index: 1;
color: rgb(0, 0, 0);
}
#text-wrapper p {
margin: 0;
}