css - 如何使用 CSS 将字符居中放置在框中？

Question

换句话说，我如何忽略 Angular 色的深度和上升，而不是根据其边界框将其垂直居中在周围框中？

这是一个最小的 html 示例:

.box {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1em;
  border: 1px solid black;
  text-align: center;
}

<span class="box">?</span>
<span class="box">,</span>
<span class="box">`</span>

它产生以下内容:

如何更改它以生成以下内容？

如果存在 CSS 解决方案，则首选，但 Javascript 也可以作为最后的手段。我正在寻找一个通用的解决方案，而不仅仅是图中的三个字符。我的页面中会有很多这样的框，因此性能(如果使用 Javascript)很重要。

为了进一步澄清，下面是我在 LaTeX 中的做法:

\newlength{\desiredboxsize}
\setlength{\desiredboxsize}{1em}
\newcommand*{\centercharinbox}[1]{%
  % Force width
  \makebox[\desiredboxsize]{%
    % Force height and center vertically
    \raisebox{\dimexpr .5\desiredboxsize - .5\height \relax}[\desiredboxsize][0pt]{%
      % Cancel depth
      \raisebox{\depth}{#1}}}}

Answer 1

理论上，您可以通过单独对齐每个 符号来实现。

实际上，您不能，因为每个符号在字符映射中都有其自己的深度和上升，尤其是仅使用 CSS 时。