我如何使不同大小的字体在html范围内垂直居中？

Question

我正在制作音调控制器：

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

我希望负号，正号和音高值全部垂直居中。我希望加号和减号的字体大小大于间距值。

当我将所有字体大小设置为相同时，效果很好...

...但是当我尝试使音高按钮变大时，它们在中心下方对齐：

这是我的CSS：

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

#pitchValue {
  font-size: 200%;
}

#pitchButtons {
  font-size: 300%;
}

如何在使所有内容垂直居中的同时增加音调按钮的字体大小？

谢谢。

Answer 1

对于您的CSS而不是垂直对齐，请尝试justify-content: center

Answer 2

首先，您不能同时使用ID选择器和选择加号和减号。 id必须是唯一的。为什么不使用Font awesome图标呢？

Answer 3

您可以使用align-items: baseline;。

Answer 4

您可以将Hex code用于数学符号。