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 我注意到使用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上发现了相同的行为.
有没有办法解决这个问题？

解决方法 看来您需要将文本缩进与letter-spacing相同的数量.第一个字母没有施加到左侧的间距

http://codepen.io/anon/pen/bcahC

.spacing-large {  letter-spacing: 0.9em;  text-align: center;  text-indent: 0.9em;}

我不知道为什么会发生这种情况,也许别人可以解释它.我想出的唯一合乎逻辑的事情是,因为它是第一个字母,左侧的间距将不适用.

总结

以上是内存溢出为你收集整理的html – 字母间距错误的文本中心对齐全部内容，希望文章能够帮你解决html – 字母间距错误的文本中心对齐所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。