web-dev-qa-db-fra.com

Espacement des lettres mauvais alignement du centre du texte

J'ai remarqué un comportement étrange en utilisant l'espacement des lettres et l'alignement du texte: centrer ensemble.
En augmentant l'espace, rapprochez le texte de la marge gauche de l'élément.

[~ # ~] 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
}

J'ai créé n codepen pour montrer ce que je veux dire .
J'ai remarqué le même comportement sur les derniers Firefox et Chrome. Existe-t-il un moyen de résoudre ce problème?

htmlcssletter-spacing
30
pasine

Il semble que vous deviez mettre le texte en retrait de la même manière que l'espacement des lettres. La première lettre n'a pas l'espacement appliqué sur le côté gauche

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>

L'explication logique que j'ai trouvée est - puisque c'est la première lettre, l'espacement sur le côté gauche ne s'appliquera pas.

63
Huangism

L'utilisation du remplissage serait plus sûre au cas où le texte se diviserait en deux lignes. le retrait de texte ne ferait que mettre en retrait la première ligne de texte.

p { 
  padding-left: 0.9em; 
}
1
fidler2326

Si vous regardez attentivement, celui du haut sans espacement des lettres n'est pas correctement centré également. La seule chose à laquelle je peux penser est de le patcher avec le singe avec margin-left: 15px ainsi:

p { margin-left: 15px; }
0
beautifulcoder