Comment centrer les images de mise en page réactives au bootstrap

Le framework Bootstrap est vraiment pratique pour créer des sites Web réactifs (ou une mise en page Web réactive), en particulier pour les images. Vous pouvez utiliser une classe CSS .img-responsive pour obtenir de la réactivité (évoluer automatiquement avec l'écran, laissons les choses comme ça. ) Comprenez), une ligne de code est implémentée, tout comme l'utilisation de balises html, il n'y a pas besoin de considérer la logique.

est le suivant : (apprentissage recommandé : Tutoriel vidéo Bootstrap)

class=”img-responsive”

Responsive image Comment centrer ?

Le centrage d'images est souvent utilisé dans la production de pages Web, alors comment centrer des images responsives ? C'est aussi très simple, il suffit d'utiliser une classe CSS .center-block. Le code est le suivant :

class=”img-responsive center-block”

Cette ligne de code rend l'image responsive et centrée. si facile !

Mais les problèmes viendront !

1. Qu'en est-il de la classe .text-center couramment utilisée dans Bootstrap (l'image réactive peut-elle être centrée) ?

La réponse est : Normalement, la classe .text-center est utilisée pour centrer le texte. Elle fonctionnera pour les images non réactives, mais pas pour les images réactives.

2. Le changement de position de la classe .center-block affectera-t-il le centrage de l'image responsive ?

La réponse est : oui.

Pourquoi ?

Ne posez pas autant de questions. Les codes marqués en rouge ci-dessus sont corrects et standards. Rassemblez les compétences de base du centrage d'images réactif sur cette page et vous pourrez les copier si nécessaire lors de la création d'un site Web.

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!