Alignement vert...LOGIN

Alignement vertical des images dans le texte

Cet exemple montre :

Comment définir l'alignement vertical du texte sur une image.

Exemple d'analyse :

l'attribut vertical-align définit l'alignement vertical d'un élément.

Description : L'attribut vertical-align 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. 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.

Vous pouvez définir les valeurs d'attribut suivantes :

Yeah baseline : Valeur par défaut, l'élément est placé sur la ligne de base de l'élément parent.

 sub : L'indice du texte aligné verticalement.

QuantitySuper : Alignez verticalement l'exposant du texte

Quantitytop : Alignez le haut de l'élément avec le haut de l'élément le plus haut de la ligne

Quantity Text-top : Alignez le haut de l'élément avec la police de l'élément parent Alignement supérieur

 Quantity middle : Placez cet élément au milieu de l'élément parent.

Quantity bottom : Alignez le bas de l'élément avec le haut de l'élément le plus bas de la rangée.

Quantity Text-bottom : Alignez le bas de l'élément avec le bas de la police de l'élément parent. ​

Quantity length :

Quantity  % : Utilisez la valeur en pourcentage de l'attribut "line-height" pour organiser cet élément. Les valeurs négatives sont autorisées.


section suivante
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> img.top {vertical-align:text-top;} img.bottom {vertical-align:text-bottom;} </style> </head> <body> <p>一个<img src="https://img.php.cn/upload/article/000/000/015/5c67d9134b166854.png" alt="w3cschool" width="150" height="50" />默认对齐的图像。</p> <p>一个<img class="top" src="https://img.php.cn/upload/article/000/000/015/5c67d9134b166854.png" alt="w3cschool" width="150" height="50" /> text-top 对齐的图像。</p> <p>一个<img class="bottom" src="https://img.php.cn/upload/article/000/000/015/5c67d9134b166854.png" alt="w3cschool" width="150" height="50" /> text-bottom 对齐的图像。</p> </body> </html>
soumettreRéinitialiser le code
chapitredidacticiel