Welche Konzepte müssen Sie verstehen, wenn Sie ein Bootstrap -Bild zentrieren?

Bootstrap bietet eine Vielzahl von Methoden zum Zentrieren von Bildern: Verwenden Sie Text-Align: Center; Inline -Elemente horizontal zentrieren. Verwenden Sie die MX-Auto-Klasse, um horizontal auf Blockebene auf Blockebene zu zentrieren. Die vertikale Zentrierung wird unter Verwendung eines Gittersystems oder einer Flexbox in Kombination mit vertikaler Ausrichtung und Behälterhöhe erreicht.

Das Bootstrap -Bild ist zentriert, was einfach erscheint, aber tatsächlich versteckt ist. Viele Anfänger werden in einige Gruben geraten und überwältigt werden. Schauen wir uns in diesem Artikel die Dinge hinter der Mitte des Bootstrap -Bildes an, damit Sie es vollständig verstehen und sich nicht mehr darum kümmern können.

Das Ziel dieses Artikels ist es, Ihnen ein gründliches Verständnis der verschiedenen Methoden zur Zentrierung von Bootstrap -Bildern und den Prinzipien dahinter zu vermitteln. Nach dem Lesen können Sie das Bild nicht nur leicht zentrieren, sondern auch die Vor- und Nachteile verschiedener Methoden verstehen, um die am besten geeignete Lösung zu wählen.

Um die Zentrierung von Bootstrap-Bildern zu verstehen, müssen Sie zunächst mehrere Konzepte herausfinden: display , margin , text-align -Attribut und das Gittersystem, das mit Bootstrap geliefert wird. display Anzeigeattribut bestimmt die Anzeigemethode von Elementen wie inline , block , inline-block usw.; margin Randattribut steuert den Rand der Elemente; text-align -Attribut steuert die Ausrichtung des Textes, kann jedoch auch die horizontale Zentrierung von Inline-Elementen beeinflussen. Das Grid -System von Bootstrap bietet eine bequeme Layout -Methode.

Beginnen wir mit dem einfachsten und verwenden Sie text-align: center; horizontale Zentrierung des Bildes erreichen. Dies funktioniert jedoch nur für inline oder inline-block Elemente. Sie müssen also display Anzeigeeigenschaft des Bildes zuerst auf inline-block festlegen:

 <code class="html"><img  src="/static/imghw/default1.png" data-src="your-image.jpg" class="lazy"   style="max-width:90%" alt="Welche Konzepte müssen Sie verstehen, wenn Sie ein Bootstrap -Bild zentrieren?" ></code>

Es sieht einfach aus, oder? Diese Methode hat jedoch eine Einschränkung: Sie kann nur horizontal zentriert und vertikal auf anderen Weise zentriert werden. Darüber hinaus sind Schreibstile direkt im style nicht die beste Praxis und nicht für die Code -Wartung förderlich.

Ein eleganterer Weg ist die Verwendung von Bootstraps Klasse. Beispielsweise können Sie mx-auto -Klasse verwenden, um eine horizontale Zentrierung zu erreichen:

 <code class="html"><img  class="mx-auto d-block lazy" src="/static/imghw/default1.png" data-src="your-image.jpg" alt="Welche Konzepte müssen Sie verstehen, wenn Sie ein Bootstrap -Bild zentrieren?" ></code>

Hier setzt d-block display Anzeigeeigenschaft des Bildes auf block , während mx-auto die linken und rechten Ränder auf auto setzt und so horizontaler Zentrieren erreicht. Dies ist einfacher als die vorherige Lösung und mehr im Einklang mit der Designphilosophie von Bootstrap.

Aber was ist mit vertikaler Zentrierung? Dies erfordert die Verwendung von Bootstraps Grid -System oder Flexbox. Mit einem Gittersystem können Sie das Bild in einen Behälter legen und dann die vertikale Zentrierung erreichen, indem Sie die Höhe des Behälters und die vertikale Ausrichtung des Bildes festlegen. Dies erfordert ein gewisses Verständnis des Netzsystems.

Die Verwendung von Flexbox ist einfacher und einfacher:

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

Hier verwenden wir Flexbox, um den Behälter horizontal und vertikal zu zentrieren. height: 200px; Stellen Sie die Containerhöhe ein, die die vertikale Zentrierungsposition des Bildes bestimmt. Denken Sie daran, Containerhöhe ist der Schlüssel.

Diese Methoden haben jedoch ihre eigenen Vor- und Nachteile. Die direkte Verwendung von Inline -Stilen ist nicht elegant genug, was leicht zu Codeverwirrung führen kann. Die Verwendung von Bootstrap -Klasse ist standardisierter, aber Sie müssen das Designkonzept von Bootstrap verstehen. Die Verwendung von Flexbox ist flexibel, aber Sie müssen den Layout -Mechanismus von Flexbox verstehen. Welche Methode zu wählen, hängt von Ihren spezifischen Bedürfnissen und Projektbedingungen ab.

Schließlich ein Ratschlag: Vergessen Sie nicht, das reaktionsschnelle Design des Bildes zu berücksichtigen. Der Display -Effekt von Bildern unter verschiedenen Bildschirmgrößen sollte konsistent sein. Sie können die Reaktionsklassen oder Medienabfragen von Bootstrap verwenden, um es zu implementieren. Denken Sie daran, dass ein eleganter Code nicht nur funktional sein sollte, sondern auch leicht zu pflegen und zu erweitern ist. Die Auswahl der am besten geeigneten Methode als die komplexeste Methode ist die wahre Bedeutung der Programmierung.

Das obige ist der detaillierte Inhalt vonWelche Konzepte müssen Sie verstehen, wenn Sie ein Bootstrap -Bild zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!