Dans cet article de tipps+tricks, nous vous expliquons les méthodes les plus courantes pour centrer une image verticalement et horizontalement à l'aide de différentes propriétés CSS. Vous trouverez ci-dessous tout ce que vous devez savoir à ce sujet.
- Comment centrer une image horizontalement
- Comment centrer une image verticalement
Comment centrer une image horizontalement en CSS
Nous avons rassemblé pour vous trois méthodes permettant de centrer l'image sur votre page Web à l'aide de CSS :
- Margin : Auto
- Text-Align
- Display : Flex
Margin : Auto
La première possibilité pour aligner une image horizontalement est d'utiliser margin : auto. Ainsi, les propriétés left-margin et right-margin sont définies automatiquement et aident au centrage. Cependant, cette utilisation ne fonctionne pas automatiquement pour les images, car il s'agit d'un élément en ligne. En utilisant la commande display:block dans le code CSS, les images peuvent être facilement transformées en éléments de bloc. L'alignement automatique fonctionne alors.
Vous devez également définir une largeur pour l'image - qui n'est donc pas de 100 % - afin que l'image puisse s'aligner automatiquement sur les bords gauche et droit.