pasine pasine - 3 months ago 31
CSS Question

Letter-spacing wrong text center alignment

I have noticed a odd behavior in using letter-spacing and text-align:center together.

Increasing the space, bring the text to be closer to the left margin of the element.

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
}


I have create a codepen to show what I mean.

I spot the same behavior on last Firefox and Chrome.
Is there a way to fix this issue?

Answer

It seems you need to indent the text by the same amount as the letter-spacing. The first letter does not have the spacing applied to the left side

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

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

I don't know why this happens, perhaps someone else can explain it. The only logical thing I came up with is since it is the first letter, spacing on the left side will not apply.