Css 在div中水平居中的字符被像素禁用

我尝试过很多不同的方法，比如使用px宽度或em宽度。我尝试过嵌套一个span，并在

文本对齐：居中

或

边距：0自动

上应用变体

我可以让R到中心或S到中心，但我不能让它们都以相同的风格居中。它需要使用相同的样式，因为尽管在本例中它是固定的，但通常字符是未知的

增大或减小字体大小有时也会调整居中的项目。当我将浏览器放大到300%时，它们都会居中显示，但这显然不是解决方案。：）

div{页边距底部：10px；}
跨度{
显示：内联块；
宽度：16px；
边框：1px实心#000；
文本对齐：居中；
左边距：20px；
}
.例2跨度{
边界半径：50%；
}
RS
RS

您可以看到“S”的距离太远，超过1像素

---

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

简单的答案是，字符的中心并不总是您认为的位置。在“普通”字体/字体中，所有字符图示符的宽度都不相同

除非字体同时为单空格和无衬线，否则上升、下降和衬线都会影响字符图示符的“尺寸”

为了获得更高的精度，请在

em

中设置宽度/高度/线条高度，如果确实需要精确到精确像素，则必须手动调整

div{
边缘底部：10px；
显示：内联块；
垂直对齐：顶部；
}
跨度{
显示：内联块；
宽度：1米；
高度：1米；
字体大小：144px；
线高：1米；
边框：1px实心#000；
文本对齐：居中；
左边距：20px；
}
.例2跨度{
边界半径：50%；
}
.其他{
字体系列：monospace
}

RS
RS

除了字形大小，在这种情况下，由于矩形中的空间为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{
边缘底部：10px；
}
跨度{
显示：内联flex；
证明内容：中心；
对齐项目：居中；
宽度：16px；
边框：1px实心#000；
左边距：20px；
}
.例2跨度{
边界半径：50%；
}

RS
RS

因为，除非您使用的是单空格字体，否则字符图示符的大小不同。我同意您的看法，字符图示符的大小不同。：）如前所述，144px解决了大部分问题。但是，即使使用单空间，您的示例也不是水平居中的。我将字体大小调整为14px，高度/宽度/行数调整为1.2米。16px的宽度不是必需的。大约这个尺寸（不是144像素！）的东西是。我用

display:inline block

将宽度调整为17px，这并不完美，但我认为已经足够接近了。

inlineflex

非常棒，只是IE用户数量异常多（8%+），所以我们需要再推迟一年使用它@有趣的是，如果我去掉

width:16px和intead应用
填充：2px 15px该
S
垂直居中。是吗？@AlexanderSolonik it尽可能将其居中放置，由于同样的原因，
S
下方还有1倍的空间。。。调整字体大小+/-1px可能会使它变得完美，尽管这可能是特定于浏览器的，这几乎是不可能的。。。根据我的经验，下面的额外像素空间比上面的看起来更居中，我猜眼睛不会像那样被欺骗
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,          -  "  -           */