Le défi de l'alignement des icônes avec le texte dans les listes est qu'une fois que le texte dépasse une ligne, l'icône centrée visuellement peut paraître décalée. L'approche initiale consistant à utiliser align-items: start dans Flexbox déplace l'icône au sommet du conteneur, ce qui n'est pas idéal en raison de l'espace de ligne par défaut.
Pour résoudre ce problème lorsque l'icône est un élément HTML, il est recommandé d'ajuster la position verticale de l'icône. L'utilisation d'une valeur fixe avec transform: translateY() s'avère instable lorsque la taille de la police, la taille de l'icône ou la largeur du conteneur changent. La solution la plus robuste consiste à utiliser l'unité lh (line-height) pour calculer un décalage dynamique, assurant ainsi un alignement constant quelle que soit la taille du texte ou de l'icône.
Lorsque l'icône est ajoutée via un pseudo-élément comme image de fond, le même principe de calcul d'un décalage relatif s'applique pour garantir un alignement cohérent avec la première ligne de texte, même lorsque le texte se prolonge sur plusieurs lignes.
Cet article de CSS-Tricks présente une méthode concise pour centrer un élément positionné absolument en CSS, utilisant seulement trois lignes de code. La technique exploite les propriétés place-self: center et inset: 0, qui fonctionnent sur tous les navigateurs. L'auteur explique que cette approche est plus idiomatique et réutilise les propriétés d'alignement familières, tout en offrant une flexibilité pour positionner les éléments de manière précise. Un bon rappel pour les amateurs de CSS!
Tout est dans le titre, sauf que ça concerne CSS