文字边框：小写字母垂直居中，大写字母-不]]

Question

我的文本（span class）将以大写字母书写，我希望它以vertical

为中心，而不是周围的边界。如果看一下result，您会看到大写字母are垂直居中，而小写字母not-它们更靠近底部。但是，当我在Android Chrome浏览器中打开此代码时，我看到的绝对是opposite图片：

这些是小写

居中的字母，而大写字母是not。有没有办法使uppercase字母居中？我不在乎小写字母。

.part_of_speech {
  font-family: Verdana, Geneva, sans-serif;
  color: #fff;
  font-weight: 700;
  border-radius: 0.3em;
  padding: 0.1em 0.2em 0.1em;
  margin: 3% 0 1.5% 0.3vw;
  font-size: calc(0.4em + 1.5vw);
}

.noun {
  background-color: #2196f3;
}

.adjective {
  background-color: #ff9800;
}

.verb {
  background-color: #4caf50;
}

.adverb {
  background-color: #f94432;
}

.conjunction {
  background-color: #a047f9;
}
<div class="part_of_speech">
  <span class="part_of_speech noun">noun</span>
  <span class="part_of_speech adjective">adj.</span>
  <span class="part_of_speech verb">verb</span>
  <span class="part_of_speech adverb">ADV.</span>
  <span class="part_of_speech conjunction">CONJ.</span>
</div>

我的文本（span类）将以大写字母书写，我希望其垂直居中，而周围是边框。如果查看结果，您会发现大写字母为...

Answer 1

大写字母都具有相同的垂直大小。小写字母没有。您如何希望将“动词”或“ adj”之类的单词对齐？在b或j或其他字母上？固定字体可能会帮助您，但我认为您也会遇到同样的问题。调整填充似乎是一个快速技巧