Bootstrap-Bild-Zentrierungstipps: Verwenden Sie das Gittersystem, um horizontal zu zentrieren. Verwenden Sie Flexbox, um vertikal zu zentrieren: D-Flex legt den Beh?lter auf den Flex-Beh?lter aus, Align-Items: Mitte vertikal. Versuchen Sie, die eigenen Klassen von Bootstrap zu verwenden, die Richtlinien für pr?zise Code zu befolgen, benutzerdefinierte Stile zu vermeiden, überm??ige Verschachtelung zu erhalten und die Lesbarkeit und Effizienz des Codes zu verbessern.

Bootstrap -Bild zentriert: Gleichgewicht zwischen Eleganz und Effizienz

Das Bootstrap -Bild ist zentriert, was einfach klingt, aber es ist wirklich ein Trick, sowohl einfach als auch effizient zu sein. Viele Neulinge werden in den Sumpf der umst?ndlichen Nist- und redundanten Code fallen. Tats?chlich liegt die Subtilit?t im Verst?ndnis des Mechanismus des Bootstrap -Frameworks selbst und der flexiblen Anwendung von CSS -Selektoren.

Der Zweck des Artikels ist sehr einfach: Helfen Sie schnell, die F?higkeiten der Zentrierung von Bootstrap -Bildern zu beherrschen, sauberen und ordentlichen Code zu schreiben und unn?tige Probleme zu vermeiden. Nach dem Lesen dieses Artikels verstehen Sie mehrere verschiedene Zentriermethoden, kennen die Prinzipien dahinter und k?nnen die am besten geeignete L?sung basierend auf den tats?chlichen Bedingungen ausw?hlen. Sie werden nicht mehr beunruhigt, indem Sie das Bild zentrieren, sondern in der Lage sein, verschiedene Layoutprobleme anmutig zu bew?ltigen.

Beginnen wir mit den Grundlagen. Der Kern von Bootstrap ist das Gittersystem, das Seitenelemente basierend auf container , row und col organisiert. Sobald Sie diese verstanden haben, wird es viel einfacher, das Bild zu zentrieren. Darüber hinaus müssen Sie mit text-align , margin und display von CSS vertraut sein, die die wichtigsten Tools für die Erzielung der Bildzentrierung sind.

Gehen wir direkt zum Thema: zentrieren Sie das Bild. Die h?ufigste Methode besteht darin, das Gittersystem von Bootstrap zu verwenden. Angenommen, Sie m?chten ein Bild horizontal zentrieren und in einen Beh?lter legen:

 <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="My Image"> </div> </div> </div></code>

Mit der Klasse justify-content-center k?nnen interne Elemente horizontal zentriert werden. col-auto l?sst das Bild den Platz einnehmen, den es ben?tigt, und vermeidet unn?tiges Dehnen. img-fluid k?nnen sich das Bild an die Beh?ltergr??e anpassen. Dies ist eine sehr einfache und effiziente L?sung, und es wird empfohlen, sie zuerst zu verwenden.

Aber was ist, wenn Ihr Bild vertikal zentriert sein muss? Das Netzsystem kann das Problem der vertikalen Zentrierung nicht direkt l?sen. Zu diesem Zeitpunkt k?nnen Sie Flexbox verwenden. Stellen Sie den übergeordneten Container in einen Flex-Beh?lter ein und verwenden Sie dann align-items: center; vertikal zentrieren:

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

Hier setzt d-flex den Container als Flex-Beh?lter, align-items: center implementiert vertikale Zentrierung justify-content-center . height: 300px; Stellen Sie die Beh?lterh?he ein, die die Voraussetzung für die vertikale Zentrierung ist. Denken Sie daran, dass Flexbox ein leistungsstarkes Werkzeug ist, aber Sie müssen seine Funktionen verstehen, um flexibel zu sein. Unangemessene Einstellungen k?nnen zu unerwarteten Ergebnissen führen.

Natürlich gibt es andere Methoden, wie z. Ich empfehle diese Methode nicht, es sei denn, sie ist absolut notwendig.

Schlie?lich über die Leistungsoptimierung. Versuchen Sie, die Klassen mit Bootstrap zu verwenden, um eine gro?e Anzahl von CSS -Stilen anzupassen. Dies verbessert nicht nur die Lesbarkeit des Codes, sondern reduziert auch die Codemenge und verbessert die Ladegeschwindigkeit der Seite. Denken Sie daran, dass der pr?gnante Code oft eine h?here Effizienz bedeutet. Vermeiden Sie die überwendung von Nistungen und Halten Sie die Codestruktur klar, was für die Wartung und Erweiterung des Codes von entscheidender Bedeutung ist. Ein guter Code ist wie ein sorgf?ltig gefertigtes Kunstwerk, einfach und elegant.

Das obige ist der detaillierte Inhalt vonSo halten Sie den Code einfach in der Mitte des Bootstrap -Bildes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!