垂直文本对齐不适用于某些字体大小

Question

我正在制作一个窗口，在此窗口中，随着用户调整其大小，组件需要根据窗口的高度进行缩放。 为此，每当窗口更改大小时，我都有一些JS来更新组件的CSS样式。

对于其中一个组件，我希望其中的文本居中，但是对于某些字体大小，该文本放置得太高： Bad vertical alignment example 我放大了此示例，使其更加清晰。文本上方有1px的空间，下方是3px。

我尝试过

• 设置lineHeight =高度，垂直对齐中心
• 设置显示弯曲，将项目居中对齐，并将文本包装在子div / span中。
• 设置lineHeight = 1，并在顶部/底部填充适当的值（相同的值）

在上述所有情况下，我还将高度和字体大小设置为与当前窗口高度匹配的值。我还尝试通过将字体大小四舍五入到最接近的整数来避免小数字体大小。

在大多数情况下都可以使用，但是总会有一些窗口大小会使对齐混乱。特别是对于较小的窗口。

html由显示flex div和按钮元素组成，每个按钮元素都包含要居中的文本。

---

编辑1：

我在这个小提琴中复制了它：https://jsfiddle.net/Lz7p2joy/6/

<div class="strip">
  <button>SBO</button>
  <button>PIN</button>
  <button>ISN</button>
</div>

.strip{
  display: flex;
  float: left;
  margin-left: 5px;
  border-radius: 5px;
  border: 1px solid #3F3F46;
  overflow: hidden;
}

button{
    font-size: 8px;
    line-height: 10px;
    height: 10px;
    padding: 0px 3.8452px;
    text-align: center;
    
    background-color: #007ACC;
    color: #F1F1F1;
    border: none;
    border-right: 1px solid #3F3F46;
    border-radius: 0;
}

它很微妙，但文本下方有3像素的空格，上方有1像素的空格。这可能取决于在其上运行的计算机/显示器/浏览器。我在用户的计算机上看到了一些较差的示例（可能与Windows显示缩放有关）。