So zentrieren Sie Bootstrap-Responsive-Layout-Bilder

Das Bootstrap-Framework ist wirklich praktisch für die Erstellung responsiver Websites (oder responsiver Webseitenlayouts), insbesondere für Bilder. Sie können eine CSS-Klasse .img-responsive verwenden, um Reaktionsfähigkeit zu erreichen (automatische Skalierung mit dem Bildschirm, belassen wir es so). ) Verstehen), eine Codezeile wird implementiert, genau wie bei der Verwendung von HTML-Tags besteht keine Notwendigkeit, die Logik zu berücksichtigen.

lautet wie folgt: (empfohlenes Lernen: Bootstrap-Video-Tutorial)

class=”img-responsive”

Responsive Bild Wie zentriere ich?

Bildzentrierung wird häufig bei der Webseitenproduktion verwendet. Wie kann man also responsive Bilder zentrieren? Es ist auch ganz einfach: Verwenden Sie einfach eine CSS-Klasse .center-block. Der Code lautet wie folgt:

class=”img-responsive center-block”

Diese Codezeile macht das Bild reaktionsfähig und zentriert. so einfach!

Aber es werden Probleme kommen!

1. Was ist mit der in Bootstrap häufig verwendeten .text-center-Klasse (kann das responsive Bild zentriert werden)?

Die Antwort lautet: Normalerweise wird die Klasse .text-center zum Zentrieren von Text verwendet. Sie funktioniert für nicht reagierende Bilder, jedoch nicht für reagierende Bilder.

2. Wird sich die Änderung der Position der .center-block-Klasse auf die Zentrierung des responsiven Bildes auswirken?

Die Antwort lautet: Ja.

Warum?

Stellen Sie nicht so viele Fragen. Die oben rot markierten Codes sind korrekt und Standard. Sammeln Sie auf dieser Seite die Kernkompetenzen der responsiven Bildzentrierung, und Sie können sie bei Bedarf bei der Erstellung einer Website kopieren.

Weitere technische Artikel zu Bootstrap finden Sie in der Spalte Bootstrap-Tutorial.

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie Bootstrap-Responsive-Layout-Bilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!