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.


Formation continue
||
<!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
  • Recommandations de cours
  • Téléchargement du didacticiel
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!