logo标签列表

字间距与文本居中之间的冲突？

htmlcss
20

使用letter-spacing会对text-align产生严重影响：http://jsfiddle.net/NFAzv/

谷歌搜索没有找到答案。 这是我遗漏了什么吗？

编辑 #1: 我在Firefox 3.6.8和Chrome 12.0.742.91上的Vista中看到的是： 因新手链接限制已删除链接（可以在评论中找到） （请注意，中心根本不对齐）

编辑 #2：这是IE9，带有垂直居中线以显示问题：http://i.stack.imgur.com/C0J0n.png

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

你使用的是哪个浏览器？在Mac OSX上的Chrome看起来符合预期。 - user657496
对我来说很好用，Windows 7上的Chrome 10。 - Pekka
什么问题？在FF4 Win7上也很好。 - Flash
这是我在Windows Vista上使用Firefox 3.6.8和Chrome 12.0.742.91时看到的截图：http://i.imgur.com/oGKY2.png - Dave2
@Andrew，@Pekka：你们的屏幕是否与上面的截图相似，或者单词的中心是否对齐？ - Dave2
显示剩余8条评论
7个回答
13

似乎所有的浏览器已经采用了一种明显与CSS3中规定不同的字母间距实现。

特别是请参阅示例XV：http://dev.w3.org/csswg/css3-text/#letter-spacing0

浏览器根本不这么做。甚至IE最近（我想是IE9）也改变了其行为，以更像其他浏览器，而非目前写入CSS3规范。

所讨论的CSS3规范仍处于工作草案状态，因此可能会在某些时候被修改以与浏览器相匹配。

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

我明白了。所以所有的浏览器都很愚蠢，希望CSS也会变得愚蠢，这样两种愚蠢就会互相抵消了？ - Dave2
但是请稍等：如果所有的浏览器都出现了这个问题，那么上面所有的“对我有效”的评论又该如何解释呢？ - Dave2
我猜“对我有效”的评论是指字体大小很小，一行有很多字母的情况。那么这确实是一个像素或两个像素的问题。但是，如果您有（正如我在许多情况下观察到的）5个字母和一个大字体大小，那么偏心就不再是一个笑话了。正如我下面所说，似乎浏览器也将字母间距添加到最后一个字母中。常规布局程序（如InDesign或其他程序）不会这样做！将padding-left设置为间距的一半可以帮助解决问题。 - Garavani
11

鉴于问题没有得到充分描述，我认为文本并没有完美居中。

你可以使用 text-indent 来将字母间距的一半作为修正值来纠正这个问题。

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

尽管只在Chrome OSX上进行过测试..

如此优雅的解决方案。不过，似乎Chrome（Ubuntu，而非Chromium）在字母后面添加了间距（例如，在显示字母后面有12像素的空格），所以我想我应该将文本缩进相同的量而不是一半大小的量用于Chrome。还没有在其他操作系统/浏览器上测试...就目前而言。 - Cafe Coder
Firefox在Windows上也是一样的。我相当确定在大多数浏览器中，字母间距只是在字母右侧添加它。 - obskyr
9

看起来它能工作，但你对像素完美的要求与letter-spacing的默认工作不符。如果你高亮文本，你会看到它确实居中了。

你可以使用以下解决方法：演示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如此愚蠢，不知道如何居中带有字母间距的文字吗？ - Dave2
5

我曾遇到类似的链接下划线问题：最后一个字母的宽度包括字间距值。因此，对于最后一个字母应用letter-spacing:0;即可解决问题。虽然不太美观，但这样做是有效的。

...
<div style="font-size: 350%; letter-spacing: 0.4em;">
    ILLUSTRATE<span style="letter-spacing:0;">S</span>
</div>
...
哇，那太糟糕了。谢谢，但CSS肯定不会那么愚蠢，对吧？ - Dave2
看看Alohci的链接，CSS并不愚蠢，但也许它的实现方式有点问题^^ - MatTheCat
丑陋的hack，但它解决了问题。 - balexand
对于我的眼睛（以及在我的情况下），实际上似乎浏览器也会在最后一个字母上添加字距，而这是常规字体设置程序所不能做到的。因此，如果字距增加，则错误居中的误差会变大。Mat说得好！你的解决方案（在我看来）是正确的解决方案。然而，无论如何决定在代码中以编程方式引入它（如果标记样式不可行），都可以采用这种方法。 - Garavani
我发现这里第二个答案中的（hacky）解决方案：https://dev59.com/q2Up5IYBdhLWcg3wNFar 对做这个很有帮助。 - Garavani
0

像这样添加字体大小的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>
0

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

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

0

我可能有点晚了，但如果我的解决方案能帮到任何人，那就好了。

这是一个简单按钮设置的示例：

<button><a href="">Enter</a></button>

在我的样式表中：
button {
    color: #f5ebe0;
    border-color: #f5ebe0;
    background-color: #00000000;

    text-indent: 2rem;

    width: 33%;
}

a {
    color: inherit;
    text-decoration: none;
    letter-spacing: 2rem;
}

看起来字母间距确实只会在字母右侧或字母之间添加间距。鉴于这种情况，（在使用字母间距时）我建议在按钮中使用锚标签，并将您的字母间距量应用于锚文本内部，然后在按钮内部应用相同数量的文本缩进。

2
请确保将<button>元素用于按钮，将<a>元素用于链接，以提高可访问性。 - Sigurd Mazanti
当然可以。实际上我这样做是因为我的一个导航按钮出现了文本换行的问题，所以我首先尝试将文本放在按钮内部进行更好的操作，但最终使用了锚点。您介意推荐一种更好的处理方法吗？感谢您的建议！ - Zero
通过按钮文本“Enter”，似乎语义上更适合使用<a>元素。 Button元素用于页面交互，例如提交表单或打开对话框，这就是为什么它们没有href属性的原因。如果您需要在页面之间进行导航，则应使用<a>元素，然后可以将其样式设置为按钮。 - Stephen M Irving
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接