web-dev-qa-db-fra.com

Comment la hauteur de ligne verticalement centre-t-elle le texte?

J'essaie de comprendre pourquoi la propriété CSS line-height place le texte verticalement au milieu de ce bouton:

.btn-order {
    width: 220px;
    height: 58px;
    font-size: 24px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    line-height: 58px;
    border: 1px solid black;
}
<div class="btn-order">Complete Order</div>
htmlcssvertical-alignment
13
user1069475

La propriété line-height définit essentiellement une 29px (29 + 29 = 58) ligne de texte située au-dessus et au-dessous de votre texte, "Commande complète". Si vous avez ajouté une autre ligne de texte en dessous de ceci, vous le trouverez 58px en dessous de ce texte. Vous mettez ligne-hauteur ici uniquement pour centrer votre texte au milieu.

Voici un bon diaporama pour vous aider à comprendre ce concept plus ... line-height

Et voici un exemple utilisant votre code de ce dont je parle: http://jsfiddle.net/YawDF/14/

En définissant line-height sur 58px, vous indiquez au navigateur de laisser la moitié au-dessus et au-dessous de la ligne de texte, ce qui crée un espace de 58 pixels entre chaque ligne et un espace de 29 pixels au-dessus de la première ligne.

NOTE LATÉRALE: Votre utilisation de vertical-align: middle est inutile dans le code que vous affichez. Cela peut être pris tous ensemble.  

12
Michael Rader

Le texte que vous générez se trouve dans sa propre boîte de ligne et vertical-align est utilisé pour la placer dans cette boîte. Cependant, cette case n'a rien à voir avec la div que vous avez entourée dans le texte. Vous définissez la hauteur de la div sur 58px mais cela n’affecte pas la hauteur de la zone de texte de la ligne. C'est pourquoi vous avez besoin de line-height pour correspondre à la hauteur de la div.

1
Rob

Lorsqu'un paragraphe est inséré dans une division, la distance entre la première ligne et la bordure supérieure de la division est égale à la moitié de la hauteur de ligne, c'est-à-dire si la hauteur de ligne par défaut est 1px, la distance entre la première ligne et la bordure supérieure de la div est 0.5px.

Si vous avez une division avec height:58px, la distance entre la ligne et la bordure supérieure de la div est de 29px et la distance entre la ligne et la bordure de la div inférieure serait = (distance totale hauteur-distance b/w la ligne et la bordure supérieure) qui est 58px-29px = 29px.Il en résulte que la ligne est alignée verticalement au centre.

De plus, il n'est pas nécessaire d'utiliser vertical align:middle (pour le texte ne contenant pas plus d'une ligne) si vous utilisez line-height pour aligner le texte de manière centrale.

0
aditya

line-height définit la hauteur du texte qui donne au paragraphe une apparence soignée. Alignement vertical fonctionne donc par rapport à hauteur de ligne lorsque vous augmentez la hauteur de ligne, vous augmentez la hauteur et vous pouvez voir plus clairement les effets de l'alignement vertical du texte.

pense cela comme un cahier que nous, enfants, utilisons pour apprendre l'anglais - l'écriture en classe maternelle 

0
Bipin Chandra Tripathi

c'est par conception. Si l'analyseur CSS (c'est-à-dire le navigateur) ne sait pas quelle est la hauteur de votre texte, il ne peut pas l'aligner verticalement correctement.

Notez qu'il existe une valeur par défaut de la propriété line-height.

0
Raptor