Welche Art von Verwendung wird zum Zentrieren von Bootstrap -Bildern verwendet

Das Zentrieren eines Bootstrap-Bildes beinhaltet nicht nur horizontales Zentrieren (MX-Auto), sondern erfordert auch vertikale Zentrierung. Häufige vertikale Zentrierschemata sind: Flexbox: D-FLEX- und Align-Item-Center-Klassen hinzufügen. Grid-Layout: Verwenden Sie Col-Auto und Row Justify-Content-Center. Absolute Positioning-Transformation: Positionieren Sie das Bild absolut und verwenden Sie Transformation: Translatey (-50%). Das Auswählen der richtigen Lösung und das Kombinieren von Bootstraps Grid -System und Flexbox/Grid -Layout können ein effizientes und elegantes Bild -Zentrieren -Layout erreichen.

Bootstrap Picture Center: Es ist nicht nur mx-auto

Viele Anfänger verwenden mx-auto direkt, wenn sie Bootstrap verwenden, um das Bild zu zentrieren, und denken, dass alles gut ist. Tatsächlich löst dies nur das Problem der horizontalen Zentrierung und der vertikalen Zentrierung, und mx-auto selbst hat einige Fallstricke. In diesem Artikel wird das Problem der zentrierenden Bootstrap-Bilder ausführlich erörtert, was einfach erscheint, aber tatsächlich versteckt ist. Nachdem Sie es gelesen haben, können Sie das Bild nicht nur leicht zentrieren, sondern auch die darin dahinter stehenden Prinzipien verstehen und einige häufige Fehler vermeiden.

Grundlegende Überprüfung: Das Grid -System von Bootstrap

Der Kern von Bootstrap liegt in seinem Gittersystem. Das Verständnis des Gittersystems ist der Schlüssel zur Beherrschung der Zentrierung von Bildern. Es steuert das Layout von Elementen durch container , row , col und andere Klassen. mx-auto Die Klasse MX-Auto ist die Abkürzung von margin-left: auto; margin-right: auto; das das Element horizontal im übergeordneten Element in die Mitte des übergeordneten Elements machen kann, sofern die Breite des Elements kleiner als die Breite des übergeordneten Elements ist. Dies ist die Grundlage für unsere Lösung, um die Bildebene zu zentrieren.

Kernkonzept: Horizontales Zentrieren und vertikale Zentrierung

In der horizontalen Mitte reicht die Verwendung von mx-auto normalerweise aus, aber nur, wenn Ihr Bild Breite eingestellt werden muss, sonst funktioniert mx-auto nicht. Dies ist eigentlich leicht zu verstehen: Wie zentrieren Sie ein Element mit einer unsicheren Breite?

Die vertikale Zentrierung ist komplizierter. mx-auto kümmert sich nur um horizontale Richtung. Es gibt viele häufige vertikale Zentriermethoden, aber Bootstrap selbst liefert keine einfache vertikale Zentrierklasse. Wir brauchen einige Fähigkeiten.

Praktische Drill: Mehrere vertikale Zentrierungslösungen

• Lösung 1: Flexbox

  Dies ist meine am meisten empfohlene Methode, einfach und effizient. Fügen Sie einfach d-flex und align-items-center Klassen zum übergeordneten Element hinzu.

   <code class="html"><div class="d-flex justify-content-center align-items-center" style="height: 200px;"> <img class="img-fluid lazy" src="/static/imghw/default1.png" data-src="your-image.jpg" alt="Responsive image"> </div></code>

  d-flex setzt das übergeordnete Element auf das Flex-Layout, die implementierende Implementierung von justify-content-center horizontaler Zentrieren und align-items-center implementiert vertikale Zentrierung. img-fluid -Klasse ermöglicht es dem Bild, sich an die übergeordnete Containerbreite anzupassen. Hinweis: Das übergeordnete Element muss die Höhe festlegen, ansonsten ist die vertikale Zentrierung ungültig.

• Plan 2: Rasterlayout

  Wenn Sie das Gittersystem von Bootstrap verwenden, können Sie auch das Netzlayout verwenden, um die vertikale Zentrierung zu erreichen.

   <code class="html"><div class="container"> <div class="row justify-content-center"> <div class="col-auto"> <img class="img-fluid lazy" src="/static/imghw/default1.png" data-src="your-image.jpg" alt="Responsive image"> </div> </div> </div></code>

  Hier müssen Sie auch die Höhe des übergeordneten Elements festlegen.

• Lösung 3: Absolute Positionierungstransformation

  Diese Methode ist flexibler, aber der Code ist etwas komplizierter. Sie müssen das Bild auf die absolute Positionierung setzen und dann transform: translateY(-50%); vertikal zentrieren. Dies erfordert eine genaue Berechnung der Höhe des Bildes. Ich empfehle diese Methode nicht, es sei denn, es gibt besondere Bedürfnisse.

FAQs und Debuggen

• Das Bild wird nicht angezeigt: Überprüfen Sie, ob der Bildpfad korrekt ist.
• Bild kann nicht zentriert werden: Stellen Sie sicher, dass das übergeordnete Element das Höhepunkt hat und das mx-auto oder Flexbox/Grid-Layout korrekt verwendet wird.
• Bildverformung: Überprüfen Sie, ob width und height des Bildes vernünftig eingestellt werden, oder verwenden Sie img-fluid -Klasse, um das Bild anpassbar zu machen.

Leistungsoptimierung und Best Practices

• Verwenden Sie img-fluid -Klasse: Machen Sie das Bild reaktionsmäßig an verschiedene Bildschirmgrößen anpassen.
• Bilder komprimieren: Reduzieren Sie die Bildgröße und verbessern Sie die Ladegeschwindigkeit der Seite.
• Verwenden von faulem Laden: Bei einer großen Anzahl von Bildern kann die Verwendung von faulen Ladetechniken die Ladeleistung der Seite verbessern.

Alles in allem ist zentrierende Bootstrap-Bilder nicht nur ein einfacher mx-auto . Nur durch die Auswahl der richtigen Lösung, kombiniertes Gittersystem von Bootstrap und Flexbox/Grid können Sie effizienten und eleganten Code schreiben. Denken Sie daran, dass das Verständnis der Prinzipien wichtiger ist, als sich an den Code zu erinnern! Üben Sie mehr und denken Sie mehr nach, und Sie können ein Bootstrap -Layout -Experte werden.

Das obige ist der detaillierte Inhalt vonWelche Art von Verwendung wird zum Zentrieren von Bootstrap -Bildern verwendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!