Comment faire des images centrales horizontalement dans div

Comment centrer l'image dans le bootstrap DIV: MEILLEUR CHOIX: Utilisez Flexbox (ajoutez les classes D-Flex et Justify-Content-Center) pour les anciens projets: Utilisez Text-Align (définissez la balise IMG sur le bloc en ligne; et ajoutez du texte-alignement: Centre;)

Rendez l'image stable dans la div: secrets de bootstrap pour centrer horizontalement

De nombreux étudiants ont rencontré ce problème: l'image ne peut pas être centrée dans la div de bootstrap, et elle est inconfortable de la regarder. En fait, la solution n'est pas si compliquée. La clé est de comprendre le mécanisme de mise en page du bootstrap et quelques conseils CSS. Cet article vous mènera pour le faire étape par étape, vous permettant de vous débarrasser complètement du problème des images de centrage, et le chemin de code sera extrêmement fluide à partir de maintenant. Après la lecture, vous maîtriserez une variété de méthodes et serez en mesure de choisir la solution optimale en fonction des conditions réelles.

Prenons d'abord les bases de Bootstrap. Bootstrap utilise les systèmes Flexbox et Grid pour disposer, qui peuvent tous deux être facilement centrés. Flexbox est plus flexible et adapté à une variété de scénarios, tandis que le système de grille est plus adapté aux dispositions de pages complexes.

Commençons par le Flexbox le plus utilisé. Pour rendre le centre d'image horizontalement dans le div, il vous suffit d'ajouter deux classes d-flex et justify-content-center au parent div. d-flex permet la disposition Flexbox justify-content-center aligne des éléments enfants (c'est-à-dire des images) horizontalement.

 <code class="html"><div class="d-flex justify-content-center"> <img src="/static/imghw/default1.png" data-src="your-image.jpg" class="lazy" alt="Your Image"> </div></code>

C'est aussi simple? Oui, c'est aussi simple! Bien sûr, vous devrez peut-être également définir l'attribut de max-width de l'image pour empêcher l'image d'être trop grande et de briser le conteneur.

 <code class="html"><div class="d-flex justify-content-center"> <img src="/static/imghw/default1.png" data-src="your-image.jpg" class="lazy" alt="Your Image"   style="max-width:90%"> </div></code>

Ce n'est que l'utilisation la plus élémentaire. Si votre image n'est pas fixée en hauteur, vous devrez peut-être également être centré verticalement. Pour le moment, vous pouvez ajouter align-items-center . Cette classe centrera les éléments enfants dans la direction verticale.

 <code class="html"><div class="d-flex justify-content-center align-items-center"> <img src="/static/imghw/default1.png" data-src="your-image.jpg" class="lazy" alt="Your Image"   style="max-width:90%"> </div></code>

Parfait! Maintenant, peu importe la taille de l'image, elle peut être régulièrement centrée horizontalement et verticalement dans la div.

Cependant, ce n'est pas le seul moyen. Si votre projet est ancien ou ne souhaite pas utiliser Flexbox pour une raison quelconque, vous pouvez également utiliser l'attribut Text-Align. Mais cette méthode ne s'applique qu'aux éléments en ligne, donc la balise IMG doit être définie pour display: inline-block; .

 <code class="html"><div style="text-align: center;"> <img src="/static/imghw/default1.png" data-src="your-image.jpg" class="lazy" alt="Your Image"   style="max-width:90%"> </div></code>

Cette méthode est plus traditionnelle et n'est pas aussi pratique que Flexbox lorsqu'il s'agit de dispositions complexes.

Parlons de problèmes possibles. Par exemple, la largeur et le rapport de hauteur de l'image sont incorrects, ce qui entraîne l'effet de centrage insatisfaisant. À l'heure actuelle, vous devrez peut-être redimensionner l'image elle-même, ou utiliser l'attribut object-fit de CSS pour contrôler l'affichage de l'image.

De plus, si votre div a un rembourrage ou une marge, cela peut également affecter l'effet de centrage. Vérifiez vos styles CSS pour vous assurer qu'il n'y a pas d'interférence de style inutile.

En bref, il existe de nombreuses façons de centrer l'image dans la div de bootstrap. La méthode à choisir dépend de vos besoins spécifiques et de votre situation de projet. Flexbox est le moyen le plus recommandé car il est simple et efficace, et a une bonne compatibilité. Cependant, ce n'est qu'en comprenant les avantages et les inconvénients de diverses méthodes que nous pouvons faire le meilleur choix dans le développement réel. N'oubliez pas que la lisibilité et la maintenabilité du code sont également importantes, alors essayez de garder le code concis et clair. J'espère que cet article peut vous aider à résoudre facilement le problème des photos de centrage, et je vous souhaite une programmation heureuse!

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!