如何使不同大小的字体在html跨度中垂直居中？

Question

我在做一个俯仰控制器：

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

我希望减号，正号和音调值都垂直居中。我希望加号和减号是比音调值更大的字体大小。

当我将字体大小都设置为相同时，它工作得相当好。

​

​

...but当我试图使俯仰按钮变大时，它们在居中下方对齐：

​

​

这是我的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 Plus和minus。id必须唯一。为什么不使用字体超赞的图标呢？

​

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

​