Pourquoi « vertical-align » affecte-t-il les éléments frères, pas seulement l'élément Inline-Block ciblé ?

Aligner verticalement les frères et sœurs alignés, pas soi-même

Comprendre l'alignement vertical n'est pas aussi simple qu'on pourrait le penser. Comme l'illustre un exemple, de manière inattendue, l'application d'un alignement vertical uniquement à un bloc en ligne aligné verticalement tout le reste sauf le contenu lui-même. Est-ce le comportement prévu ?

Évidemment, vertical-align définit l'alignement vertical d'un élément dans son conteneur parent. Contrairement à l'attente selon laquelle seule la valeur le contenu serait aligné, le navigateur aligne tous les éléments, y compris le parent p et le texte dans .

Pour clarifier, sans aucun alignement, le et son contenu sont rendus par le navigateur avec une hauteur égale et alignés verticalement avec le haut du p.

Application de vertical-align: middle à modifie l'alignement vertical de tous les éléments dans le p. Le p lui-même est maintenant aligné verticalement avec le milieu de la hauteur de , et le texte à l'intérieur de reste aligné vers son sommet, apparaissant comme s'il n'était pas aligné verticalement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!