Question

我注意到使用letter-spacing和text-align：center的奇怪行为增加空间，使文本更接近元素的左边距。

HTML

<div>
  <p>- Foo Bar Zan -</p>
</div>

CSS

div {
  width: 400px;
  height:400px;
  background-color: #3b0d3b;
  text-align:center;
  margin:auto;
}

p {
  color:#fff;
  margin-top: 40px;
  text-align:center;
  padding-top:30px;
  font-size: 1.2em;
  letter-spacing:.9em;  <--- Here is the problem
}

我创建了a codepen to show what I mean 我在上一次Firefox和Chrome上发现了相同的行为。有没有办法解决这个问题？

Answer 1

似乎您需要将文本缩进与字母间距相同的数量。第一个字母没有应用于左侧的间距

div {
  width: 400px;
  height: 400px;
  background-color: #3b0d3b;
  text-align: center;
  margin: auto;
}

p {
  color: #fff;
  background: black;
  text-align: center;
  font-size: 1.2em;
  padding: 0;
  margin: 0;
}

.spacing {
  letter-spacing: .4em;
}

.spacing-large {
  letter-spacing: 0.9em;
  text-align: center;
  text-indent: 0.9em;
}

<div>
  <p>- Foo Bar Zan -</p>
  <p class="spacing">- Foo Bar Zan -</p>
  <p class="spacing-large">- Foo Bar Zan -</p>
</div>

我提出的逻辑解释是 - 因为它是第一个字母，左边的间距将不适用。

Answer 2

使用填充会更安全，因为文本会分成两行。 text-indent只会缩进第一行文本。

p { 
  padding-left: 0.9em; 
}

Answer 3

仔细观察，没有字母间距的顶部也没有正确居中。我唯一能想到的就是用margin-left: 15px来修补它，如下所示：

p { margin-left: 15px; }

Answer 4

设置负边距，使其与字母间距相同。因此，如果字母间距为10px，请设置margin-right:-10px。

使用text-indent将在第一个字母前保留该空间，即使父元素太小而无法容纳内容，也不会使其看起来居中。

Answer 5

此行为是因为最右边的字母的右侧增加了多余的空间（由于增加了字母间距）。

在这种情况下，有一种更简单的方法可以实现中心对齐。只需删除最后一个字母的字母间距属性

这是一个解决方案。

div {
  width: 400px;
  height:400px;
  background-color: #3b0d3b;
  text-align:center;
  margin:auto;
}

p {
  color:#fff;
  margin-top: 40px;
  text-align:center;
  padding-top:30px;
  font-size: 1.2em;
}

.spacing {
  letter-spacing:.4em;
}

.spacing-large {
  letter-spacing:.9em;
}

<div>
  <p>- Foo Bar Zan -</p>
  <p class="spacing">- Foo Bar Zan <span style="letter-spacing:0">-</span></p>
  <p class="spacing-large">- Foo Bar Zan <span style="letter-spacing:0">-</span></p>
</div>

请注意span元素嵌套最后一个字符。

Answer 6

我发现解决字母间距单词偏离中心的最佳答案是将 放在单词前面。

字母间距错误的文本中心对齐

6 个答案: