CSS alignement vertical et de la base de la position
Je suis nouveau sur le CSS et récemment la lecture de la spécification et des problèmes dans la compréhension de l'vertical-align propriété.
<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px;"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px;"></span>
</div>
<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px;"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px; vertical-align: top"></span>
</div>
<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px; vertical-align: bottom"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px; vertical-align: top"></span>
</div>Code ci-dessus crée 3 div, chacun d'entre eux contient 3 vide inline boîtes (travées):
- Dans la 1re division, tout semble aller bien. Tous les 3 travées sont alignés sur la ligne de base de la boîte de ligne.
- Dans le 2ème div, après j'ai mis le
vertical-alignpropriététoppour la 3e travée, les deux premières travées sont déplacés vers le haut. Et je me suis perdu à partir d'ici, je ne comprends pas pourquoi ils seront déplacés, selon quelle règle. - La 3ème div est encore plus câblé pour moi. J'ai mis le
vertical-alignpropriétébottompour la 1ère travée, et cela provoque de la 2e travée déplacer légèrement inférieur de la 3e travée (ce sera remarqué quand un zoom assez).
La chose que je peux trouver dans la spécification dit ci-dessous, mais quels sont exactement les multiple solutions? Quelqu'un pourrait-il nous éclairer sur ce point?
In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.1 does not define the position of the line box's baseline.
J'ai également créé un violon. S'il vous plaît exécuter dans Firefox ou google Chrome si vous êtes intéressé.
- stackoverflow.com/questions/4357315/...
- Notez que le violon troisième exemple est différent dans IE (11) à partir de Chrome (31) et Firefox (25 & 26).
Vous devez vous connecter pour publier un commentaire.
vertical-alignest principalement utilisé pourinlineélément par exempleimgtag, qui est couramment définie àvertical-align: middle;afin de s'aligner correctement dans le texte.Démo (Sans l'utilisation de
vertical-align)Demo 2 (À l'aide de
vertical-align)Ok, donc c'était une idée générale de la façon dont
vertical-aligntravaille avec une valeur demiddle.Donc, d'abord, permet de voir quelles sont les valeurs valides pour
vertical-alignpropriété.Crédits : Mozilla Developer Network
Maintenant, permet de résoudre vos doutes, étape par étape..
Dans le premier exemple, tout va bien selon vous, mais la réponse est non, vous faites une demande
line-heightà laspanqui varie, mais le fait estline-heightest pas appliquée comme la façon dont vous pensez...Hauteur de la ligne est en fait de ne pas arriver appliquée
Faire
inline-blocket il sera appliquéVous pouvez lire cette réponse pour plus d'informations, c'est pourquoi à l'aide de
line-heightsurspanest inutile.De passer à votre second doute, vous avez de la
line-heightsur la premièrespan, deuxièmespanmais pas le troisièmespandonc ce qui se passe ici? Commespanestinlineavec le texte et de toute façonline-heightde ne pas jouer le rôle de là, comme je l'ai expliqué précédemment, ils sont heureux aligné verticalement avec le texte, tandis que lorsque vous utilisezvertical-align: top;, il ne déplace pas les deux autres cases ci-dessus que, au contraire, il s'aligne sur le - dessus le texte.Voir comment le
vertical-align: top;aligne en haut du texteÀ venir pour le dernier exemple de la vôtre, ici, d'abord
spanélément est aligné à trèsbottomcomme prévu, bien que son correct, de passer à la seconde, vous l'avez dit, c'est légèrement dans le inférieur que la troisième, parce qu'il n'est pas aligné à tous,line-heightest ce qui rend cet élémentalignverticalementcenteret le dernier, se déplace un peu à latop, qui est en fait aligné à latop.Permet de faire
inline-blocket de voir comment ils se comportent en réalité..Donc j'espère que vous avez compris la différence entre les trois exemples, mais il est nécessaire pour vous de comprendre les
line-heightpropriété etinline-blockbien ainsi, aussi n'oubliez pas de consulter la réponse que j'ai partagé.line-heightpropriété sera appliqué àinlineéléments. Selon le cahier des charges, lors du calcul de la hauteur de la zone de ligne,1.The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'vertical-alignbien dans la ligne des boîtes àtop/downva effectivement changer la base de la position de la boîte de ligne. Et en raison de la situation de référence est déplacée vers le haut ou vers le bas, les autres cases seront affectés en quelque sorte. Mais je ne suis pas sûr de savoir si je me dirige dans la bonne direction...