Alignement du centre de texte avec espacement des lettres
J'ai remarqué un comportement étrange dans l'utilisation de la lettre de l'espacement et de l'text-align:center ensemble.
L'augmentation de l'espace, apporter le texte pour être plus près 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éer un codepen pour montrer ce que je veux dire.
J'aperçois le même comportement sur le dernier Firefox et Chrome.
Est-il un moyen de corriger ce problème?
source d'informationauteur pasine
Vous devez vous connecter pour publier un commentaire.
Il semble que vous avez besoin de mettre en retrait le texte du même montant que la lettre de l'espacement. La première lettre n'a pas l'espacement appliqué sur le côté gauche
http://codepen.io/anon/pen/bcahC
L'explication logique, je suis venu avec est - puisque c'est la première lettre, l'espacement sur le côté gauche ne s'applique pas.
À l'aide de rembourrage serait plus en sécurité au cas où le texte sur deux lignes. text-indent serait uniquement retrait de la première ligne de texte.
Si vous regardez de près, celle d'en haut, sans que l'espacement des lettres n'est pas correctement centré. La seule chose que je peux penser à est de monkey patch avec
margin-left: 15px
comme suit: