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

我注意到在同时使用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上发现了相同的行为。
有没有解决此问题的方法？

最佳答案

似乎您需要使文字缩进的距离与字母间距相同。第一个字母的左边没有空格

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>

我想出的逻辑解释是-因为它是第一个字母，所以左侧的空格将不适用。

关于html - 字母间距错误的文本中心对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21612058/