居中对齐应用了额外字母间距的文本答案

【问题标题】：Centre align text that has extra letter spacing applied居中对齐应用了额外字母间距的文本
【发布时间】：2023-03-08 15:52:01
【问题描述】：

居中对齐具有增加的letter-spacing 的某些文本的最佳方法是什么，以便它实际上位于其容器的中心？该文本位于h5 标记中，该标记在父div 中居中对齐，但明显位于左侧，因为letter-spacing 适用于每个字母的右侧。我可以手动添加一些左侧填充，但如果浏览器缩放级别发生更改，则不会保持一致。

有没有办法计算每个字母之间的间距，使用 css 或 JavaScript？有没有更好的方法在字母之间插入间距，让所有内容都居中对齐？

容器 div 的所有边都已经有 20px 填充，所以我真的需要将 0.75em 添加到左侧填充。这是h5 和容器标签的相关css：

.container {
    padding: 20px;
    float: left;
}

.container h5 {
    font-size: 33px;
    letter-spacing: 1.5em;
    text-align: center;
}

容器如下所示：

【问题讨论】：

可以尝试添加在正文的开头。可以平衡一下。
不幸的是，坚持11px 太远了-尽管大声喊叫

标签： css alignment

【解决方案1】：

您不能只为您的.container h5 指定padding-left: 1.5em; 吗？

【讨论】：

这是漫长的一天 - 大喊马修
原来它只是我桌面上的 Chrome - 我的 Chrome 24 for Windows 的缩放率存在问题，因此字母间距和填充不会以相同的速率缩放。 jsfiddle.net/MVHm8
嗯，你确实是对的 - 想知道我将如何解决这个问题？ +1 指出这一点。将容器上的填充更改为2em 没有任何区别（在这里大声思考！），因为这是由于缩放率

【解决方案2】：

另一种解决方案是为.container h5 指定margin-right: -1.5em;，这样在对齐时就不会在容器中添加额外的空间。

【讨论】：

【解决方案3】：

它很旧，但另一个解决方案（技巧）是在字符之间添加一个空格。对我来说，这是最好的解决方案，因为我希望角色之间有很大的空间；）

【讨论】：