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 […]

Posté le par Benoît Philibert|15474 vues

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 :

 


 


Ces articles pourraient vous intéresser

Tags

3 commentaires

    • Nirihx
    • (5 février 2016 at 16 h 22 min)

    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

    • Bonjour Nirihx, merci pour votre commentaire.
      D’autre tutoriels arrivent prochainement, aucune inquiétude à avoir 😉

    • ronini
    • (15 décembre 2016 at 16 h 51 min)

    trop cool

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.