2

EDIT: It appears this problem only occurs on Mac Firefox (I tested on version 107), and is likely a bug specific to that browser.

In the snippet below, I am using the display:flex; align-items: center trick to center some large text vertically. However, there is extra space at the bottom:

extra space

There is no padding, and I can't figure out what is causing the lack of symmetry. I've also tried removing the <span>, and adjusting line-height, but neither of those worked either.

How can I make the text appear centered between the top and bottom border lines. Of course I can add padding-top to compensate manually, but I'd like a solution that actually solves the problem and would scale with text size.

Here is a snippet demonstrating the problem:

div {
  border: 1px solid black;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5rem;
}
<div>
<span>$0.00</span>
</div>
Adrian Mole
  • 49,934
  • 160
  • 51
  • 83
Jonah
  • 15,806
  • 22
  • 87
  • 161
  • Looks perfectly centered in Safari. So make sure any corrections you apply don't ruin that. – connexo Nov 26 '22 at 21:58
  • Same in firefox – aloisdg Nov 26 '22 at 21:59
  • also in chrome. are you on zoom 100% ? – IT goldman Nov 26 '22 at 22:00
  • 2
    I am on Firefox 107.0 on Mac (latest version). I was zoomed a bit for that screenshot but I just changed zoom to 100% and it still has extra space on the bottom. – Jonah Nov 26 '22 at 22:04
  • 2
    I can confirm the problem in Firefox/MacOS as well. – connexo Nov 26 '22 at 22:07
  • 4
    Consider opening an issue over at https://bugzilla.mozilla.org/enter_bug.cgi, providing your reproducer. – connexo Nov 26 '22 at 22:12
  • These sorts of problems are usually caused by other code that is present in the project, but not included in the Stack post. – Michael Benjamin Nov 26 '22 at 22:13
  • 1
    @MichaelBenjamin That is why I included a snippet to reproduce. It reproduces exactly on Firefox Mac as described. It is not caused by other code. – Jonah Nov 26 '22 at 22:20
  • Got it. (I posted that comment before you edited the question to include that piece of info.) – Michael Benjamin Nov 26 '22 at 22:23
  • 1
    Duplicateish: https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image/5804278#5804278 — it **is** vertically centred, the text just doesn't contain any characters with descenders such as `y`, `p` or `g` – Quentin Nov 27 '22 at 23:33
  • @Quentin, No, it isn't. Please read the edit. – Jonah Nov 28 '22 at 00:21

0 Answers0