css - 将 div 中的字符水平居中偏离一个像素

Question

我尝试了很多不同的方法，例如使用 px 宽度或 em 宽度。我试过嵌套一个跨度并在 text-align:center 或 margin:0 auto 上应用变体。

我可以让 R 居中或 S 居中，但我无法让它们都以相同的样式居中。它需要采用相同的样式，因为虽然在此示例中它是固定的，但通常字符是未知的。

增加和减小字体大小有时也会调整哪个元素居中。当我将浏览器放大到 300% 时，它们都显示在中间，但这显然不是解决方案。 :)

<style>
div { margin-bottom:10px; }

span {
  display:inline-block;
  width:16px;
  border:1px solid #000;
  text-align:center;
  margin-left:20px;
}

.example2 span {
  border-radius:50%;
}
</style>
<div class="example1">
<span>R</span> <span>S</span>
</div>

<div class="example2">
<span>R</span> <span>S</span>
</div>

http://codepen.io/anon/pen/NrqJLX

您可以看到“S”太靠右了 1 个像素。

虽然我发现了大量类似的其他 stackoverflow 问题，但没有一个是完全相同的。抱歉，如果这是重复的。

Answer 1

除了字形大小，在这种情况下，由于矩形中的空间为 16px，圆形中的空间为 14px，并且“S”的视觉宽度为 7px，因此它必须向右(或向左)1px，因为它不能定位在半个像素的位置。

无论您做什么，无论是否等宽，这都会导致问题，因为某些字母的视觉宽度(或高度)减去可用空间除以 2，不会总是在两侧创建均匀空间，因此为 1 像素实际中心的左侧或右侧(顶部或底部)。

就是说，我认为 flexbox 会在保持居中方面做得最好，所以我只是在您现有的代码中将 display: inline-block 替换为这个

display: inline-flex;      /* used inline-flex to keep the span side-by-side */
justify-content: center;   /* horizontal, when using row direction */
align-items: center;       /* vertical,          -  "  -           */

示例片段

div {
  margin-bottom:10px; 
}

span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width:16px;
  border:1px solid #000;
  margin-left:20px;
}

.example2 span {
  border-radius:50%;
}

<div class="example1">
<span>R</span> <span>S</span>
</div>

<div class="example2">
<span>R</span> <span>S</span>
</div>