Vertical alignement of span inside a div when the font-size is big

Question

Note: I've already read How to vertically center a <span> inside a div? but here it's slightly different (see below).

I'm trying to insert some big text inside a circle button, an image inside another one, and a title aligned vertically.

This perfectly works on Chrome (I've used various answers from Circle button css):

But strangely, it doesn't work on Firefox and also iPhone Safari (bad alignment):

How to solve such a vertical alignment problem?

.circlebtn { height: 5.4em; width: 5.4em; border-radius: 50%; background-color: black; color: white; text-align: center; cursor: pointer; border: 0; user-select: none; outline: 0; display: inline-block; margin: 1.9em 0 3em 1em; float: left; }
.circlebtn img { width: 3.75em; }
#a span { font-size: 4em; font-weight: bold; }
#c { margin: 1.3em 0 0 1em; float: left; font-size: 2em; }

<button id="a" class="circlebtn"><span>+</span></button>
<button id="b" class="circlebtn"><img src="https://via.placeholder.com/762x416" id="b"></button>
<h1 id="c">HELLO</h1>

Note: I've also tried with vertical-align:middle as suggested in How to vertically center a <span> inside a div?:

<div class="parent">
  <span class="child">Yes mom, I did my homework lol</span>
</div>
You should then add the CSS rules

.parent { height: 20px; }
.child { line-height: 20px; vertical-align: middle; }

but I think the problem here comes from the fact the child span has a different font size.

the plus characater isn't the same in all browser so I guess this is the issue. Better consider something that render the same by using an explicit font-family for example and don't rely on the default one — Temani Afif, Feb 16 '20 at 21:40
@TemaniAfif How to vertical-align it so that it would work with any font? I've tried `vertical-align: middle` as shown at the end of the question, but the result was the same. — Basj, Feb 16 '20 at 21:44
you cannot, each font is unique. You cannot have the same visual alignment for all because they aren't designed the same way that's why the fix it use the same font instead of trying to make all the fonts behave the same. — Temani Afif, Feb 16 '20 at 21:46
@TemaniAfif There surely is a way with CSS to force a span to be vertically centered inside a div, even if the font-size of the span is different than the div font-size. I can't imagine this is impossible with CSS... — Basj, Feb 16 '20 at 21:49
I am not talking about the font-size, I am talking about the font. I am also talking about the difference between chrome and Firefox. A trivial example: https://jsfiddle.net/1qpfcvtj/ ... you can clearly see that all the span have the same font-size, the same alignment and they aren't aligned because the font is different in each case. technically they are perfectly aligned but not like you want — Temani Afif, Feb 16 '20 at 21:54
@TemaniAfif Indeed, adding `font-family: sans-serif` solves it for Firefox, but not for iPhone Safari. Would you have an idea which would work for all of them? — Basj, Feb 16 '20 at 22:01
`sans-serif` is still a font that depend on the browser and the device. Use a google font for example where you are sure it would be the same everywhere since it won't depend on the browser/device. Or make the Plus symbole using CSS: https://stackoverflow.com/a/55281827/8620333 — Temani Afif, Feb 16 '20 at 22:02
@TemaniAfif Thank you, I will try this. But anyway, why wouldn't CSS be able to detect the actual height (`max{y such there is a pixel in char} - min{y such there is a pixel in char}`) of the character and perfectly center it (for any font), with something like `vertical-align: middle`? — Basj, Feb 16 '20 at 22:07
this is what CSS is doing but the character isn't designed to be on the middle of that height. You can inspect the element to notice how the plus isn't in the middle of the span — Temani Afif, Feb 16 '20 at 22:11
@TemaniAfif I think you can post all this information as an answer. Thank you! — Basj, Feb 16 '20 at 22:13
*(max{y such there is a pixel in char} - min{y such there is a pixel in char})* --> this won't work because you can easily imagine all the missalignment will have with any text. What you want can only be done with JS. Here is an idea if you are intrested: https://stackoverflow.com/a/58925003/8620333 — Temani Afif, Feb 16 '20 at 22:15
@TemaniAfif Interesting to know that there is no direct CSS solution, and that it requires JS! I think this is the answer: do you want to post it (or I can also write it if needed, for future reference). — Basj, Feb 16 '20 at 22:20

score 1 · Accepted Answer · answered Feb 16 '20 at 23:08

As mentioned in @TemaniAfif's comments, the font itself can influence the height and alignment, as seen in this jsFiddle.

One solution would be to use JavaScript: How to vertically align all text in CSS?

Another one would be to generate the + sign with CSS only: Make plus symbol in CSS

.plus {
  width:4.5em;
  height:4.5em;
  
  background:
    linear-gradient(#fff,#fff),
    linear-gradient(#fff,#fff),
    #000;
  background-position:center;
  background-size: 50% 0.5em, 0.5em 50%;
  background-repeat:no-repeat;
}

.radius {
  border-radius:50%;
}

<div class="plus radius">
</div>

Vertical alignement of span inside a div when the font-size is big

1 Answers1

Linked