Introduction détaillée à la compréhension approfondie des CSS de l'alignement vertical

Conférence 1 : Compréhension de base de la famille vertical-align

Comprendre les valeurs d'attribut et la composition prises en charge par vertical-align

Attributs :

1. hériter

Classe linéaire

> Catégories de sous -cript et d'indice

0px, 2em, 20%

, toutes prennent en charge la marge négative, l'espacement des lettres d'espacement des mots-alignement vertical, et le comportement est cohérent. La taille numérique correspondante est décalée de haut en bas en fonction de l'alignement de la ligne de base

         vertical-align La valeur en pourcentage est calculée par rapport à la hauteur de la ligne.

Conférence 2 La condition préalable pour que l'alignement vertical fonctionne

Discutez de l'impact de diverses valeurs d'affichage sur l'alignement vertical

Il existe des conditions pour que l'alignement vertical fonctionne . Application Éléments de niveau en ligne et de cellule de tableau

éléments de niveau en ligne

img span strong em

entrée de bloc en ligne

élément de cellule de tableau

.table-cell:

État par défaut : images, boutons, texte et cellules

1.affichage : modifier l'affichage des éléments Niveau

2.css déclare le niveau d'affichage du changement d'éléments

Balises IMG dans un label P mis en place Vertical-Align : Middle Les images ne sont pas au milieu

Mais c'est trop court et pas assez centré

Combat réel : centrer verticalement le texte et les images sur plusieurs lignes

                             Text

                                                                                

                                                                                            ; align:middle }

.test-list > img{vertical-align:middle;}

Conférence 3 alignement vertical et hauteur de ling

vertical - Le pourcentage d'alignement est calculé par rapport à la valeur de la hauteur de ligne.                                         vertical-align:-10%;

} Équivalent à vertical-align=-3px

Il y a un espace vide au bas de l'image en ligne. La solution est de supprimer la hauteur de la ligne ou de modifier les attributs d'alignement vertical bas, haut, milieu

Dérivées de base du phénomène : Centrage vertical <.>

vertical-align:middle;line-height:36px;

Si l'étiquette est définie sur une hauteur de ligne plus grande que l'image, l'image sera approximativement centrée verticalement.

Chapitre 4 Compréhension approfondie de la valeur de l'attribut de ligne d'alignement vertical

Le comportement de la ligne du bas, de la ligne du haut et de la ligne du milieu

vertical-align:bottom

1.élément inline/inline-block : alignez le bas de l'élément avec le bas de la ligne entière

2.élément table-cell : alignez le bord de remplissage de la cellule avec le bas de la ligne du tableau

vertical-align : TOP

Vertical-Middle

1.inline/Inline-Block Element : le point central vertical de l'élément et la ligne de base de l'élément parent 1 /2 Alignement x-height

2 2 Élément .table-cell : la zone de remplissage de la cellule est centrée par rapport à la ligne extérieure du tableau.

Valeur de centrage vertical approximative

vertical -align:text-top/text-bottom

Définition

1.vertical-algin:text-top

Le haut et le centent parent de la boîte - alignement supérieur de la zone

2.vertical-align:text-bottom

Alignement du bas de la boîte et du bas de la zone de contenu au niveau parent

1. La position de l'élément vertical-align n'a rien à voir avec les éléments avant et après La position de vertical ; l'alignement n'a rien à voir avec la hauteur de ligne. Quant à la taille de la police, elle est liée à la taille de la police

Effet réel

Image d'effet d'alignement de l'émoticône et du texte (16x16)

                                                                                                                                                                                                                                                                                                 Taille de police exacte et faibles exigences de compatibilité

Il est plus approprié d'utiliser le bas du texte et de ne pas être affecté par la hauteur de la ligne et les autres éléments en ligne

Le sixième chapitre vertical ; aligner les classes d'exposant et d'indice

1. Exposant en html

2. Indice en html

La plus petite taille est 75 % de l'original taille de la police

1. ^{-->alignement vertical:super}

2. _Définition

1.vertical-align:super

Élevez la ligne de base de la boîte à la position de base en exposant appropriée du parent.

2.vertical-align:sub

Abaissez la ligne de base de la boîte à la position de base de l'indice appropriée du parent.

Application pratique

Chapitre 7 : Le mécanisme incohérent de l'alignement vertical

Le comportement des éléments adjacents avec un alignement vertical différent

Quand Quand il y a incohérence

                                                                                                                                                                                                                                                      possible > IE6/7

Firefox/Chrome

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!