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

【问题标题】：How do I make fonts of different sizes vertically centered in html spans?如何使不同大小的字体在 html 跨度中垂直居中？
【发布时间】：2020-09-19 06:50:05
【问题描述】：

我正在制作一个俯仰控制器：

<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%;
}

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

谢谢。

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

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

【讨论】：

【解决方案2】：

首先，您不能同时使用 id 选择器和 Select Plus 和 minus 。 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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：