Attribut vertical-align CSS

L’attribut vertical-align en CSS permet de contrôler l’alignement vertical des éléments par rapport à leur ligne de base. Introduit en CSS1, cet attribut est un outil clé pour la mise en forme du texte et d’autres éléments en ligne.

Utilisation et Syntaxe

La propriété vertical-align peut être utilisée pour ajuster la position verticale des éléments. Elle est souvent utilisée avec des balises telles que <b> et <i> pour ajuster la position du texte. Voici un exemple de son utilisation :

             /* CSS */             b {                 vertical-align: super;             }             i {                 vertical-align: sub;             }             /* HTML */             <p>Texte de base <i>sous la ligne de base</i> et <b>au-dessus de la ligne de base</b></p>         

Tester avec Codepen

Utilisez des outils en ligne comme Codepen pour expérimenter avec l’attribut vertical-align et visualiser son impact sur le rendu des éléments.

Compatibilité Navigateur

L’attribut vertical-align est pris en charge par tous les principaux navigateurs web, ce qui le rend fiable pour une utilisation transversale.

Valeurs de l’Attribut vertical-align

Ce tableau présente les différentes valeurs que peut prendre l’attribut vertical-align, avec des exemples de syntaxe pour chaque effet.

Impact sur la Hauteur de Ligne

L’utilisation de vertical-align peut affecter la hauteur de ligne de l’élément parent, un aspect important à considérer lors de la conception de la mise en page.

Propriétés CSS Connexes

En complément de vertical-align, d’autres propriétés CSS telles que color, text-align, et line-height jouent un rôle crucial dans la typographie et la mise en forme du texte.

Conclusion

L’attribut vertical-align en CSS est essentiel pour un contrôle précis de l’alignement vertical des éléments. Sa compréhension et son utilisation appropriée peuvent grandement améliorer l’aspect visuel et la lisibilité des pages web.