Was ist das Implementierungsprinzip des Bootstrap -Bildzentrierens

Es gibt drei Schritte, um das Bild in Bootstrap zu zentrieren: Verwenden Sie die Text-Center-Klasse, um horizontales Zentrieren zu erreichen, vorausgesetzt, das Bild ist ein Inline-Element oder verwenden Sie einen Inline-Block. Wenn Sie das Flexbox -Layout verwenden, um die vertikale Zentrierung zu erreichen, muss die feste Höhe der Behälter festgelegt werden. Unter Berücksichtigung der Probleme, die durch inkonsistente Bildgrößen verursacht werden, verwenden Sie maximale Breite: 100%; Begrenzen Sie die maximale Breite des Bildes oder verarbeiten Sie die Bildgröße, um die Konsistenz aufrechtzuerhalten.

Bootstrap -Bild zentriert? Diese Frage scheint einfach zu sein, aber sie hat tatsächlich ein Geheimnis. Viele Anfänger werden in einige Gruben fallen und denken, dass ein einfaches text-center alles tun kann, aber sie stellen fest, dass das Bild nur horizontal zentriert ist und die vertikale Richtung fehlt. Lassen Sie uns in diesem Artikel in die Dinge im Zentrum von Bootstrap -Bildern eintauchen, damit Sie diese Fähigkeit vollständig beherrschen und sich von den Problemen verabschieden können, die durch eine Fehlausrichtung von Bildern verursacht werden.

Beginnen wir mit den Grundlagen. Der Kern von Bootstrap ist ein CSS-basiertes Rastersystem, das das Layout von Elementen durch eine Reihe von Klassennamen steuert. Um das Bild zu zentrieren, besteht der Schlüssel darin, display Anzeigeattribut und die von Bootstrap bereitgestellten Containerklassen zu verstehen. Unterschätzen Sie diese grundlegenden Konzepte nicht, sie sind die Eckpfeiler, alles zu verstehen. Zum Beispiel display: inline-block; Ermöglicht Ermöglichung von Elementen, die in einer Linie wie Elemente in der Linie angezeigt werden, und haben Breite und Höhenattribute wie Elemente auf Blockebene, die häufig bei der Bildzentrierung verwendet werden.

Kommen wir nun auf den Punkt. Die häufigste Möglichkeit, Bilder zu zentrieren, besteht darin, text-center -Klasse von Bootstrap zu verwenden. Dies kann horizontales Zentrieren erreichen, jedoch nur, wenn Ihr Bild ein Inline-Element ist oder inline-block verwenden.

 <code class="html"><div class="text-center"> <img src="/static/imghw/default1.png" data-src="your-image.jpg" class="lazy" alt="Was ist das Implementierungsprinzip des Bootstrap -Bildzentrierens"> </div></code>

Diese Codezeile ist einfach, aber Sie haben möglicherweise ignoriert, dass das img -Tag standardmäßig ein Inline -Element ist. Dies führt dazu, dass text-center es nur horizontal zentriert, und das Bild in vertikaler Richtung wird immer noch nach seiner eigenen Höhe angezeigt.

Um vertikales Zentrieren zu erreichen, benötigen Sie einen hoch festen Behälter und verwenden dann Flexbox -Layout oder andere Tricks. Ich persönlich empfehle Flexbox, da es einfach und effizient ist.

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

Dieser Code verwendet d-flex , justify-content-center und align-items-center . d-flex setzt den Container auf das Flex-Layout, die implementierende justify-content-center implementiert horizontales Zentrieren und align-items-center implementiert die vertikale Zentrierung. Denken Sie daran, style="height: 200px;" ist sehr wichtig, es definiert die Höhe des Behälters so, dass die vertikale Zentrierung wirksam wird. Ohne feste Höhe ist die vertikale Zentrierung von Flexbox nicht möglich. Dies ist ein Punkt, den viele Anfänger wahrscheinlich ignorieren.

Natürlich gibt es andere Methoden wie die Verwendung von Tabellenlayout oder absolute Positionierung mit negativen Rändern. Diese Methoden sind jedoch relativ komplex und haben eine schlechte Wartung, daher empfehle ich sie im Allgemeinen nicht. Die Flexbox -Methode ist einfach und leicht zu verstehen und hat eine bessere Leistung.

Lassen Sie uns über mögliche Probleme sprechen. Beispielsweise ist die Größe des Bildes inkonsistent, was zu unbefriedigenden Zentrierungseffekten führt. Zu diesem Zeitpunkt können Sie in Betracht ziehen, max-width: 100%; Um die maximale Breite des Bildes zu begrenzen, um sicherzustellen, dass das Bild den Behälter nicht durchbricht. Alternativ verarbeiten Sie die Bildgröße, um sie konsistent zu halten.

In Bezug auf die Lesbarkeit und Wartung von Code in Bezug auf die Code -Wartung schlage ich schließlich vor, dass Sie aussagekräftige Klassennamen verwenden, anstatt nur die Standardklassen von Bootstrap zu stapeln. Ein guter Codestil kann Ihnen in der zukünftigen Wartung große Probleme erspart. Denken Sie daran, Code ist für die Leute geschrieben, gefolgt von Maschinen. Das Schreiben eleganter Code ist auch ein wichtiger Schritt, um Ihre Programmierkenntnisse zu verbessern.

Das obige ist der detaillierte Inhalt vonWas ist das Implementierungsprinzip des Bootstrap -Bildzentrierens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!