Centrer une image avec Bootstrap 4

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 :