Kann das Bootstrap -Bild mit Position zentriert werden?

Bootstrap -Bilder haben verschiedene Zentralmethoden, und die Auswahl hängt von den Anforderungen und der Projektstruktur ab. Der einfachste Weg, um horizontal zu zentrieren, besteht darin, die MX-Auto-Klasse von Bootstrap zu verwenden, während vertikales Zentrieren Flexbox (D-Flex Align-items-Center) oder Gitterlayout verwenden kann. Es wird empfohlen, Position zu vermeiden: absolut und transformieren, es sei denn, sie wird nicht explizit von anderen Teilen betroffen. In Bezug auf die Leistungsoptimierung wird empfohlen, SRCSET zu verwenden, um Bilder mit verschiedenen Größen und komprimierten Bildern zur Reduzierung der Dateigröße bereitzustellen.

Bootstrap Das Bild ist zentriert, verwenden Sie position ? Natürlich, aber es gibt eine Lücke zwischen "Can" und "Best Practice".

Lassen Sie uns in diesem Artikel über die Dinge im Zentrum von Bootstrap -Bildern sprechen und warum position manchmal nicht die beste Lösung ist und Sie sogar in eine Grube fallen lassen. Nach dem Lesen können Sie nicht nur verschiedene Methoden beherrschen, sondern auch die Prinzipien dahinter verstehen und effizientere und elegantere Code schreiben.

Sprechen wir zuerst über die Grundlagen. Das Grid -System von Bootstrap ist der Eckpfeiler seines Layouts. Sie können denken, dass die Verwendung position: absolute; Plus left: 50%; transform: translateX(-50%); Kann das Problem der Zentrierung des Bildes direkt lösen, was tatsächlich möglich ist, aber diese Methode abweicht vom Rahmen von Bootstrap ab und zerstört ihre reaktionsschnellen Layout -Eigenschaften. Diese Methode kann sehr schmerzhaft sein, wenn Ihre Seite komplex ist oder ob Sie das Bild auf Bildschirmen unterschiedlicher Größen konzentrieren müssen. Es ignoriert die eleganteren und robusteren Lösungen von Bootstrap.

Was sind die eleganteren Methoden, die Bootstrap bietet?

Die einfachste und direkteste Sache ist die Verwendung von Bootstrap -Klassen. Zum Beispiel kann mx-auto Klasse Elemente horizontal zentrieren. Fügen Sie es in den Behälter hinzu, der das Bild enthält, um das Bild horizontal zu zentrieren.

 <code class="html"><div class="mx-auto" style="width: 200px;"> <img src="/static/imghw/default1.png" data-src="your-image.jpg" class="lazy" alt="Kann das Bootstrap -Bild mit Position zentriert werden?"> </div></code>

Dies ist eine Praxis, die mit den Prinzipien von Bootstrap sehr übereinstimmt. Der Code ist prägnant und leicht zu verstehen und leicht zu warten. Es erreicht jedoch nur horizontale Zentrierung. Was ist mit vertikaler Zentrierung?

Die vertikale Zentrierung macht die Situation etwas komplizierter. Sie können Flexbox- oder Gitterlayouts verwenden, um dies zu erreichen. Flexbox ist leichter und eine gute Wahl für eine einfache vertikale Zentrierung.

 <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="Kann das Bootstrap -Bild mit Position zentriert werden?"> </div></code>

d-flex ermöglicht das Layout von Flexbox, align-items-center richten das Projekt vertikal aus. Hier ist zu beachten, dass Sie height des Behälters festlegen müssen, da sonst vertikale Zentrierung nicht wirksam wird.

Netzlayouts können auch vertikale Zentrierung erreichen, sind jedoch besser für komplexe Layoutszenarien geeignet. Wenn Ihr Layout bereits Grid verwendet, wird es natürlicher sein, das Bild zu zentrieren.

Was position: absolute; Methode zum Hinzufügen von transform betrifft, empfehle ich, sie so weit wie möglich in Bootstrap -Projekten zu vermeiden. Es sei denn, Sie sind sich sehr sicher, dass es andere Teile der Seite nicht beeinträchtigt und Sie die Wartungsprobleme, die es mit sich bringt, behandeln. Denken Sie daran, die Wartbarkeit von Code ist viel wichtiger als vorübergehende Bequemlichkeit und Geschwindigkeit.

Schließlich über die Leistungsoptimierung. Denken Sie für große Bilder daran, srcset -Attribut zu verwenden, um Bilder von verschiedenen Größen bereitzustellen, die unterschiedliche Bildschirmauflösungen entsprechen und die Ladegeschwindigkeit verbessern. Dies ist die tatsächliche Leistungsoptimierung, kein Gewirr von Unterschieden auf Pixelebene auf Pixelebene. Vergessen Sie nicht, Bilder zu komprimieren und die Dateigröße zu reduzieren. Dies ist der König.

Kurz gesagt, es gibt viele Möglichkeiten, Bootstrap -Bilder zu zentrieren. Welche Methode zu wählen, hängt von Ihren spezifischen Anforderungen und Ihrer Projektstruktur ab. Denken Sie jedoch daran, den Klassen und Layout -Schemata, die mit Bootstrap ausgestattet sind, vorrangig zu machen, die eher der Designphilosophie von Bootstrap entsprechen und leichter aufrechterhalten sind. Verpassen Sie nicht die Grundlagen und verfolgen Sie die sogenannten Fähigkeiten. Einfachheit und Effizienz sind die Best Practices.

Das obige ist der detaillierte Inhalt vonKann das Bootstrap -Bild mit Position zentriert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!