html - 如何使不同大小的字体在 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%;
}

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

谢谢你。

标签： htmlcssvertical-alignment

Answer 1

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