[FIXED] How do I make fonts of different sizes vertically centered in html spans?

Issue

I'm making a pitch controller:

<div id="pitchWrapper">
  <span id="pitchButtons">-</span>
  <span id="pitchValue">0</span>
  <span id="pitchButtons">+</span>
</div>

I want the minus, plus, and pitch value all to be vertically centered. I want the plus and minus to be a bigger font-size than the pitch value.

It works reasonably well when I set the font sizes to all be the same...

...but when I try to make the pitch buttons bigger, they align below center:

Here's my css:

#pitchWrapper {
  display: flex;
  align-items: center;
  vertical-align: middle;
}

#pitchValue {
  font-size: 200%;
}

#pitchButtons {
  font-size: 300%;
}

How can I increase the font size of the pitch buttons while keeping everything vertically centered please?

Thank you.

Solution

for your CSS instead of vertical-align, try justify-content: center

Answered By - Jude Bobinihi

Answer Checked By - David Marino (PHPFixing Volunteer)