css - 对齐 font-variant：smallcaps 与其他元素

Question

我在垂直对齐元素时遇到了一些问题，如图所示：

也就是说，当font-variant: smallcaps生效时，包含文本的跨度不再“居中”，旁边有图标，由于图标的大小由字体大小决定，“字体”越大，这一点就越明显。

我尝试将 span 转换为一个display:block元素，但无法让它使用vertical-align: middle，我尝试将它转换为display: flex并使用align-items: center. 没有成功，似乎只有显示器“脱节”，而内部文本大小合适。你会如何解决这个问题？

小提琴：https ://jsfiddle.net/1nzhgymf/

.menu-item {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;

  width: 100%;
  height: 2.8em;
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
  font-family: Roboto;
  font-size: 20px;

  flex-grow: 0;
  flex-shrink: 0;

  padding: 0.4em;
}

 .icon {
    min-width: 1em;
    min-height: 1em;
    background: red;
      margin-right: 0.4em;
  }

<div>
  <a class="menu-item">
    <div class="icon"></div>
    <span>Example</span>
  </a>
  <a class="menu-item" style="font-variant: all-small-caps">
    <div class="icon"></div>
    <span>Example</span>
  </a>
</div>

Answer 1

最初尝试在这里回答时错误地得出结论，字体的 em 大小受 CSS font-variant 中的 all-small-caps 影响。事实并非如此（当然不应该是，为字体/字体大小固定的 em），但我将这个答案保留在这里而不是删除它，因为提问者发表了一些有用的评论。

这是进一步的解释尝试：

如上所述的问题是垂直对齐元素的问题。给出了一个全大写单词的示例，其对齐方式与设置为 all-small-caps 的单词对齐方式不同。在下面的屏幕截图中，您可以看到这方面的变化 - 一条全小写或全小写的行似乎比大写示例更靠后。

从某种意义上说，这是真的——在大写示例中，中线穿过大写 E 和 X 的中间，这使得它围绕线保持平衡。在全小盘股的例子中，尽管首都的中心已经跌破中线。图像中的最后一行显示了为什么这是必要的 - 否则混合文本会上下波动。