Explication détaillée de l'utilisation de l'attribut vertical-align en CSS

Définition de vertical-align

Définition W3C de vertical-align : L'attribut vertical-align définit l'alignement vertical de l'élément. Cette propriété définit l'alignement vertical de la ligne de base d'un élément en ligne par rapport à la ligne de base de la ligne dans laquelle l'élément apparaît. Permet de spécifier des valeurs de longueur négatives et des valeurs de pourcentage. Cela abaisse l'élément au lieu de l'élever. Dans les cellules d'un tableau, cette propriété définit l'alignement du contenu des cellules dans la zone de cellule.

Le texte est généralement aligné sur une ligne de base invisible, avec le bas des lettres au-dessus. La propriété vertical-align peut élever ou abaisser des lettres ou des images au-dessus ou en dessous de la ligne de base du texte. Les valeurs de l'attribut vertical-align incluent baseline, sub, super, top, text-top, middle, bottom, text-bottom, etc., où la valeur initiale est baseline.

baseline - Aligne la ligne de base de l'élément enfant avec la ligne de base de l'élément parent. Pour les éléments sans ligne de base, tels que des images ou des objets, alignez leur bas avec la ligne de base de l'élément parent.

sub (ci-dessous) - Place l'élément en dessous (indice), en alignant spécifiquement la ligne de base de l'élément avec la position d'indice préférée de son élément parent.

super (ci-dessus) - place l'élément au-dessus (exposant), en alignant spécifiquement la ligne de base de l'élément avec la position en exposant préférée de son élément parent.

text-top - Aligne le haut de l'élément avec le haut de la lettre la plus haute de son élément parent.

top - aligne le haut de l'élément avec le haut de l'élément le plus haut de la rangée.

milieu - Centre l'élément verticalement.

bottom (bottom) - aligne le bas de l'élément avec le bas de l'élément le plus bas de la rangée.

text-bottom (text-bottom) - aligne le bas de l'élément avec le bas de la police de son élément parent.

Interprétation de l'alignement vertical

La définition de l'alignement vertical sur le W3C peut être grossièrement divisée en deux parties :

Le premier type Pour l'utilisation , regardez d'abord la phrase suivante "Dans les cellules du tableau, cette propriété définira l'alignement du contenu de la cellule dans la zone de cellule." Ceci est facile à comprendre si vous ajoutez un style vertical-align:middle au td d'un tableau. , le contenu du tableau sera centré verticalement. De même, si vous donnez un vertical-align:bottom, il sera aligné en bas, et si vous donnez un vertical-align:top, il sera aligné en haut.

Pour la deuxième utilisation, voir la phrase de la page précédente : "Cet attribut définit l'alignement vertical de la ligne de base d'un élément en ligne par rapport à la ligne de base de la ligne où se trouve l'élément." Je ne sais pas parler un langage professionnel, je peux donc vous donner une analogie : supposons qu'il y ait deux éléments en ligne a et b. Lorsque a est ajouté avec un style vertical-align:middle, le bas (ligne de base). ) de b sera aligné avec la position médiane de a, comme indiqué ci-dessous :

Si a et b ajoutent tous deux un style vertical-align:middle, alors ils seront alignés l'un avec l'autre en position médiane, c'est-à-dire , leurs lignes médianes dans la direction verticale seront alignées, comme indiqué ci-dessous :

Par exemple, img et span apparaissent ensemble. Si vous souhaitez que le texte soit aligné au milieu de l'image, vous devez ajouter img. {vertical-align:middle;}

à l'image. Un autre exemple est lorsque l'entrée et la durée sont utilisées ensemble, dans Google Firefox IE8 et supérieur. La valeur par défaut est que la durée est au milieu de l'entrée, mais dans ie6/ie7, le bas de la travée est aligné avec le bas de l'entrée. La façon de réaliser l'unification est d'ajouter input{vertical-align:middle;} à l'entrée pour aligner leurs lignes médianes verticales. span{vertical-align:middle;}

Utilisation de vertical-align

1 Utilisé pour les éléments en ligne

Ce qui suit est l'image L'alignement vertical est un exemple pour illustrer. l'utilisation de l'attribut vertical-align.

img{ vertical-align:middle;}
<div><img src="http://pic2.58.com/ui7/job/hire/pic4.png" />看看我的位置</div>

2. Utilisé dans les tableaux

L'attribut vertical-align peut être directement utilisé dans les cellules du tableau, et l'effet est équivalent à l'attribut valign en HTML.

td{ height:40px; vertical-align:middle;}
<table><tr><td>这是一个测试</td><td>这是一个测试</td></tr><tr><td>这是一个测试</td><td>这是一个测试</td></tr></table>

3. Utilisé pour les éléments de bloc

L'attribut vertical-align n'est pas applicable aux éléments de bloc, c'est pourquoi certaines personnes utilisent l'attribut vertical-align pour être invalide. Mais nous pouvons utiliser l'attribut display, définir sa valeur sur table-cell, convertir l'élément block en cellule, puis utiliser l'attribut vertical-align.

div{width:500px; height:200px; border:1px blue solid; display: table-cell; vertical-align: middle;}
<div><img src="http://pic2.58.com/ui7/job/hire/pic4.png" /></div>

Il convient de noter que la méthode ci-dessus présente des problèmes de compatibilité. IE6/IE7 et les navigateurs avec IE comme noyau tels que World Window, 360, Aoyou et d'autres navigateurs ne prennent pas en charge cette utilisation, mais Chrome et Firefox le peuvent.

Afin d'être compatible avec ie6/7, vous pouvez ajouter les attributs suivants au div

div{
*display:block;
 
*font-size:175px;/*高度为200px，  则200*0.873约为175px* 撑开/ 
 }

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!