如何使不同大小的字体在 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选择器不能和Select加号和减号一起使用。 id 必须是唯一的。为什么不使用 Font awesome 图标？

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

.pitchValue {
  font-size: 200%;
}

.pitchButtons {
  font-size: 300%;
}

  <script src="https://kit.fontawesome.com/dc0c634418.js" crossorigin="anonymous"></script>



<div id="pitchWrapper">
  <span class="pitchButtons">
      <i class="fas fa-minus"></i>
    </span>
  <span class="pitchValue">0</span>
  <span class="pitchButtons">
      <i class="fas fa-plus"></i>
    </span>
</div>

Answer 3

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

#pitchWrapper {
    display: flex;
    align-items: baseline;
}
#pitchValue {
    font-size: 200%;
}
.pitchButtons {
    font-size: 300%;
}

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

Answer 4

您可以使用 Hex code 作为数学符号。

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

#pitchValue {
  font-size: 150%;
}

.pitchButtons {
  font-size: 300%;
}

<div id="pitchWrapper">
  <span class="pitchButtons">&#8722;</span>
  <span id="pitchValue">0</span>
  <span class="pitchButtons">&#x2B;</span>
</div>

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

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

html

css

vertical-alignment