Comment centrer les images dans bootstrap

Lorsque nous utilisons bootstrap pour mettre en page du contenu, nous avons parfois besoin que les images soient affichées horizontalement et centrées dans le contenu.

Généralement, nos images utilisent toutes la classe .img-responsive pour implémenter la réactivité des images. (Apprentissage recommandé : Tutoriel vidéo Bootstrap)

Si vous devez réaliser un centrage horizontal d'images réactives, nous devons alors utiliser la classe .center-block au lieu de .text- center

Utilisation de la classe .center-block pour réaliser un centrage horizontal des images responsives :

<p><img class="img-responsive center-block" src="..." /></p>

Remarque : Placement du . classe de l'édifice central Emplacement. Il doit être placé dans la balise . S'il est placé dans le calque externe, le centrage ne peut pas être réalisé.

Par exemple, le code ci-dessous ne peut pas centrer l'image.

<div class="center-block"><img class="img-responsive" src="..." /></div>

Si l'image n'ajoute pas la classe responsive .img-responsive, alors nous pouvons également utiliser .text-center pour centrer l'image  :

<p class="text-center"><img src="..."></p>

Pour des articles plus techniques liés à Bootstrap, veuillez visiter la colonne Tutoriel Bootstrap pour apprendre !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!