Il y a plusieurs façon de centrer une image avec Bootstrap 4. Deux classes proposent des alternatives propres qui nous permettront de ne pas rajouter de propriétés CSS à notre projet.
Centrer une image avec la classe « .center-block »
La classe .center-block
est la plus appropriée. En effet, cette dernière s’applique directement sur la balise <img>
ce qui permet de définir un placement dans l’espace de l’élément totalement indépendant du reste.
<div class="container-fluid"> <img src="https://goo.gl/uvvDdu" class="center-block" alt=""></div>
L’URL de l’image a été raccourcie il est possible qu’elle ne marche pas lorsque vous essayez à la maison.
Résultat :

Centrer une image avec la classe « .text-center »
La classe .text-center
est un ajout à la balise image. À l’origine le .text-center
est définit pour l’alignement des textes (gauche, centré ou à droite). Si vous utiliser une balise englobant l’image avec la classe .text-center
, alors votre image sera automatiquement centrée dans la balise.
<div class="container-fluid"> <div class="text-center"> <img src="https://goo.gl/NBif74" alt=""></div> </div>
Cette seconde solution peut s’avérer utile lorsqu’une classe .text-center
est déjà utilisée afin de ne pas rajouter une classe CSS supplémentaire à la balise image.
Résultat :

3 commentaires
Nirihx
Bonjour,
Merci pour l’info dans la version 3.x center-block existe déjà mais encore mieux avec une alternative dans la version 4.
J’aimerai avoir la suite encore merci
Benoît Philibert
Bonjour Nirihx, merci pour votre commentaire.
D’autre tutoriels arrivent prochainement, aucune inquiétude à avoir 😉
ronini
trop cool