So zentrieren Sie Bilder im Bootstrap

Wenn wir Bootstrap zum Layouten von Inhalten verwenden, müssen Bilder manchmal horizontal und zentriert im Inhalt angezeigt werden.

Im Allgemeinen unsere Bilder verwenden alle die Klasse .img-responsive, um die Bildreaktionsfähigkeit zu implementieren. (Empfohlenes Lernen: Bootstrap-Video-Tutorial)

Wenn Sie eine horizontale Zentrierung responsiver Bilder erreichen müssen, müssen wir stattdessen die Klasse .center-block verwenden .text- center

Verwenden Sie die .center-block-Klasse, um die horizontale Zentrierung von responsiven Bildern zu implementieren:

<p><img class="img-responsive center-block" src="..." /></p>

Hinweis: Platzierung des . Standort der Mittelblockklasse. Es muss im -Tag platziert werden. Wenn es in der äußeren Ebene platziert wird, kann keine Zentrierung erreicht werden.

Zum Beispiel kann der folgende Code das Bild nicht zentrieren.

<div class="center-block"><img class="img-responsive" src="..." /></div>

Wenn das Bild nicht die Responsive-Klasse .img-responsive hinzufügt, können wir auch .text-center verwenden, um das Bild zu zentrieren :

<p class="text-center"><img src="..."></p>

Weitere technische Artikel zu Bootstrap finden Sie in der Spalte Bootstrap-Tutorial, um mehr darüber zu erfahren!

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