Les images de bootstrap ont diverses méthodes de centrage, et le choix dépend des exigences et de la structure du projet. La fa?on la plus simple de centrer horizontalement est d'utiliser la classe MX-Auto de Bootstrap, tandis que le centrage verticalement peut utiliser Flexbox (D-Flex Align-Items-Center) ou la mise en page de la grille. Il est recommandé d'éviter la position: absolue et se transformer à moins qu'elle ne soit explicitement affectée par d'autres parties. En termes d'optimisation des performances, il est recommandé d'utiliser SRCSET pour fournir des images de différentes tailles et images compressées pour réduire la taille du fichier.

Bootstrap L'image est centrée, utilisez position ? Bien s?r, mais il y a un écart entre "Can" et "Best Practice".

Dans cet article, parlons des choses au centre des images de bootstrap, et pourquoi l'utilisation de position n'est parfois pas la meilleure solution, et peut même vous faire tomber dans une fosse. Après avoir lu, vous pouvez non seulement ma?triser plusieurs méthodes, mais aussi comprendre les principes derrière elle et écrire du code plus efficace et élégant.

Parlons d'abord des bases. Le système de grille de bootstrap est la pierre angulaire de sa disposition. Vous pouvez penser que l'utilisation de position: absolute; plus left: 50%; transform: translateX(-50%); Peut résoudre directement le problème de la centrage de l'image, ce qui est en effet possible, mais cette méthode s'écarte du cadre de bootstrap et détruit ses caractéristiques de mise en page réactives. Cette méthode peut être très douloureuse à maintenir si votre page est complexe ou si vous devez garder l'image centrée sur les écrans de différentes tailles. Il ignore les solutions les plus élégantes et robustes fournies par Bootstrap.

Alors, quelles sont les méthodes les plus élégantes que Bootstrap fournit?

La chose la plus simple et la plus directe est d'utiliser des classes bootstrap. Par exemple, mx-auto peut centrer des éléments horizontalement. Ajoutez-le au conteneur contenant l'image pour centrer l'image horizontalement.

 <code class="html"><div class="mx-auto" style="width: 200px;"> <img src="/static/imghw/default1.png" data-src="your-image.jpg" class="lazy" alt="Limage bootstrap peut-elle être centrée avec la position?"> </div></code>

Il s'agit d'une pratique très cohérente avec les principes de Bootstrap. Le code est concis et facile à comprendre et facile à entretenir. Cependant, il n'atteint que le centrage horizontal. Qu'en est-il du centrage vertical?

Le centrage vertical rend la situation un peu plus compliquée. Vous pouvez utiliser des dispositions Flexbox ou Grid pour y parvenir. Flexbox est plus léger et est un bon choix pour le simple centrage vertical.

 <code class="html"><div class="d-flex align-items-center" style="height: 200px;"> <img src="/static/imghw/default1.png" data-src="your-image.jpg" class="lazy" alt="Limage bootstrap peut-elle être centrée avec la position?"> </div></code>

d-flex permet la disposition FlexBox, align-items-center aligne le projet verticalement. Il convient de noter ici que vous devez régler height du conteneur, sinon le centrage vertical ne prendra pas effet.

Les dispositions de grille peuvent également atteindre un centrage vertical, mais ils conviennent plus à des scénarios de disposition complexes. Si votre mise en page utilise déjà la grille, il sera plus naturel d'utiliser la grille pour centrer l'image.

Quant à position: absolute; méthode d'ajout transform , je recommande d'éviter de l'utiliser dans les projets bootstrap autant que possible. Sauf si vous êtes très s?r que cela n'affectera pas les autres parties de la page et que vous pouvez gérer les problèmes de maintenance qu'il apporte. N'oubliez pas que la maintenabilité du code est beaucoup plus importante que la commodité et la vitesse temporaires.

Enfin, sur l'optimisation des performances. Pour les grandes images, n'oubliez pas d'utiliser srcset pour fournir des images de différentes tailles en fonction des différentes résolutions d'écran et améliorer la vitesse de chargement. Il s'agit de la véritable optimisation des performances, pas un enchevêtrement de différences au niveau des pixels triviales. N'oubliez pas de compresser des images et de réduire la taille du fichier, c'est le roi.

En bref, il existe de nombreuses fa?ons de centrer des photos de bootstrap. La méthode à choisir dépend de vos besoins spécifiques et de votre structure de projet. Mais n'oubliez pas de donner la priorité aux classes et aux schémas de mise en page qui viennent avec Bootstrap, qui sont plus conformes à la philosophie de conception de Bootstrap et sont plus faciles à entretenir. Ne manquez pas les bases et ne préparez pas les soi-disant compétences. La simplicité et l'efficacité sont les meilleures pratiques.

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!