div 内的文本未垂直对齐

Question

我正在尝试将两个字符相邻写入，其中第二个字符位于 div 中。我遇到的问题是两个字符不会垂直对齐。此问题仅出现在 Chrome 中，并且假定是渲染问题。有什么办法可以绕过它吗？

附加的代码片段是我的代码的简化版本（我无法从中删除 div）。问题在这段代码中不可见 - 但是，如果您将其复制并粘贴到 html 文档中并在 Chrome 中打开它，您将能够复制它 - 但您可能需要在不同的行上复制 html 几次直到您获得发生未对齐的输出实例。

任何帮助表示赞赏:)

.one {
  display: inline-block;
}
.two {
  display: inline-block;
  position: relative;
}
.three {
  position: relative;
  margin-top: 2px;
  border-top: 10px solid #000000;
}

<span class="one">3<div class="two"><div class="three">3</div></div></span>

Answer 1

试试这个

.one {
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
}

此代码可能有效