字母间距和文本对齐：中心之间的冲突？答案

【问题标题】：Conflict between letter-spacing and text-align:center?字母间距和文本对齐：中心之间的冲突？
【发布时间】：2016-02-18 20:03:22
【问题描述】：

使用letter-spacing 似乎真的与text-align 搞砸了：http://jsfiddle.net/NFAzv/

谷歌搜索没有发现任何问题。我在这里遗漏了什么吗？

编辑 #1：这是我得到的（Vista 上的 Firefox 3.6.8 和 Chrome 12.0.742.91）：由于新手的链接限制而删除了链接（可以在 cmets 中找到）（注意中心是如何完全不对齐的）

编辑 #2：这里是 IE9，有一条居中的垂直线来显示问题所在：http://i.stack.imgur.com/C0J0n.png

编辑 #3：我在下面的 cmets 中确认 Windows 7 上的 Chrome 10 出现了问题。至少我不是唯一一个发疯的人。

【问题讨论】：

您使用的是什么浏览器？在 mac osx 上的 chrome 中看起来与预期的一样
适用于我，Windows 7 上的 Chrome 10
适用于我，Linux 上的 Chrome 12。
有什么问题？在 FF4 Win7 上也可以。
这是我得到的（Firefox 3.6.8 和 Chrome 12.0.742.91 在 Vista 上）：i.imgur.com/oGKY2.png

标签： html css

【解决方案1】：

似乎所有浏览器都集中在一个字母间距实现上，这显然与 css3 所说的应该发生的不一致。

具体参见http://dev.w3.org/csswg/css3-text/#letter-spacing0 的示例 XV

浏览器根本不这样做。 IE 最近甚至改变了它的行为（我认为是 IE9），使其更像其他浏览器，而不像目前编写的 CSS3 规范。

有问题的 CSS3 规范仍处于工作草案状态，因此可能会在某个时候更改以匹配浏览器的功能。

您可以通过添加 padding-left 值以匹配字母间距来重新平衡行，但这可能并不总是可行的。

【讨论】：

我明白了。所以所有的浏览器都太笨了，以至于 CSS 会（希望在未来）也让自己变得笨，所以这两种形式的笨会相互抵消？
但是等等：如果所有的浏览器都错了，那么上面的所有“为我工作”的 cmets 是什么解释？
我猜“为我工作”的 cmets 确实是指字体较小且一行中有很多字母的情况。那么它真的是一个或两个像素的问题。但是，如果你有（正如我在许多情况下观察到的那样）假设 5 个字母和一个大字体，那么去中心化不再是一个笑话。正如我在下面所说的，浏览器似乎也在最后一个字母中添加了字母间距。常规布局程序（如 InDesign 或其他）不会这样做！将 padding-left 设置为间距的一半会有所帮助。

【解决方案2】：

由于没有真正描述问题，我假设文本没有完全居中..

您可以在字母间距的一半处使用text-indent 来纠正此问题..

.centered {
  letter-spacing:12px;
  text-indent:6px;
}

虽然只在 Chrome OSX 上测试过..

【讨论】：

如此优雅的解决方案。虽然，chrome（Ubuntu，而不是 chromium）似乎在字母后添加了间距（例如，显示字母后的 12px 空间），所以我想我应该文本缩进相同的数量而不是 chrome 的一半大小。还没有在其他操作系统/浏览器上测试过……还没有。
Windows 上的 Firefox 也是如此。我相当肯定字母间距只是在大多数浏览器中将它添加到字母的右侧。

【解决方案3】：

似乎可行，但您对这种像素完美度的要求不符合letter-spacing 的默认工作方式。如果您突出显示文本，您会看到它确实居中。

您可以使用以下解决方法：demo fiddle

<div style="text-align: center;">           
  <div style="font-size: 130%; letter-spacing: 0.6em; padding-left: 0.6em;">THIS</div>
  <div style="font-size: 350%; letter-spacing: 0.4em; padding-left: 0.4em;">ILLUSTRATES</div>            
  <div style="font-size: 130%; letter-spacing: 0.4em; padding-left: 0.4em;">THE</div>
  <div style="font-size: 200%; letter-spacing: 0.1em; padding-left: 0.1em;">PROBLEM</div>           
</div>

【讨论】：

感谢您的解决方法，但您是说 CSS 太愚蠢以至于它不知道如何以字母间距居中单词？

【解决方案4】：

我已经看到链接下划线的类似问题：最后一个字母的宽度包括字母间距值。所以申请letter-spacing:0; 最后的字母应该可以解决问题。它很丑，但它有效

...
<div style="font-size: 350%; letter-spacing: 0.4em;">
    ILLUSTRATE<span style="letter-spacing:0;">S</span>
</div>
...

【讨论】：

哇，太可怕了。谢谢，但 CSS 肯定没那么愚蠢，是吗？
查看 Alohci 的链接，CSS 并不傻，但也许它的实现 ^^
丑陋的黑客，但它解决了问题。
在我看来（在我的情况下），实际上浏览器似乎也在最后一个字母中添加了一个字母间距，这是常规字体设置程序没有做到的。因此，如果字母间距增加，错误的居中误差就会变大。好点垫！您的解决方案（在我看来）是正确的解决方案。然而，人们决定以编程方式将其引入代码中。（如果无法使用标记样式）
我在这里的第二个答案中找到了（hacky）解决方案：stackoverflow.com/questions/15441742/change-last-letter-color 有助于做到这一点。

【解决方案5】：

像这样添加 50% 的字体大小作为文本缩进

    <div style="text-align: center;">
        <div style="font-size: 130%; letter-spacing: 0.6em;text-indent:0.3em">THIS</div>
        <div style="font-size: 350%; letter-spacing: 0.4em;text-indent:0.2em">ILLUSTRATES</div>
        <div style="font-size: 130%; letter-spacing: 0.4em;text-indent:0.2em">THE</div>
        <div style="font-size: 200%; letter-spacing: 0.1em;text-indent:0.05em">PROBLEM</div>
    </div>

【讨论】：

【解决方案6】：

虽然这不是确切的问题，但我遇到了一个问题，即文本的起始点离右侧太远了：

我有一个问题，在应用字母间距后，我的文本不再水平居中，但这是由于我限制了文本容器的宽度，所以它溢出了它的容器..值得研究.. 这可能看起来很愚蠢，但实际上这是一个容易犯的错误。

【讨论】：