Вертикальное выравнивание span внутри div, когда размер шрифта большой

Question

Примечание: я уже прочитал Как расположить по вертикали внутри div? , но здесь это немного отличается (см. Ниже).

---

Я Попытка вставить большой текст внутри кнопки круга, изображение внутри другой кнопки и заголовок, выровненный по вертикали.

Это прекрасно работает на Chrome (я использовал различные ответы от Круглая кнопка css):

Но, как ни странно, он не работает на Firefox, а также на iPhone Safari (плохое выравнивание):

Как решить такую ​​проблему с вертикальным выравниванием?

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

Примечание: я также пробовал с vertical-align:middle, как предложено в Как вертикально центрировать внутри 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; }

но я думаю, что проблема здесь в том, что дочерний диапазон имеет другой размер шрифта.

Answer 1

Как уже упоминалось в комментариях @ TemaniAfif, сам шрифт может влиять на высоту и выравнивание, как показано в this jsFiddle .

Одним из решений будет использование JavaScript: Как выровнять весь текст по вертикали в CSS?

Еще один способ - сгенерировать знак + только с CSS: Сделать символ плюс в 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>