Reaktionsfähiges Bild zentrieren Bootstrap 3

Question

Ich mache einen Katalog mit Bootstrap 3. Wenn er auf Tablets angezeigt wird, sehen die Produktbilder hässlich aus, weil sie eine kleine Größe (500x500) und eine Breite von 767 Pixel im Browser haben. Ich möchte das Bild in die Mitte des Bildschirms setzen, aber aus irgendeinem Grund kann ich es nicht. Wer kann mir helfen, das Problem zu lösen?

Answer 1

Ich würde eine etwas "abstraktere" Klassifizierung vorschlagen. Fügen Sie eine neue Klasse "img-center" hinzu, die in Kombination mit der Klasse .img-responsive verwendet werden kann:

// Zentriere responsive Bilder
.img-responsive.img-center {
  margin: 0 auto;
}

Answer 2

Sie können hier die Eigenschaft d-block verwenden oder Sie können ein Elternelement mit der Eigenschaft 'text-center' in Bootstrap oder 'text-align: center' in CSS verwenden.

Ein Bild wird standardmäßig als inline-block angezeigt, Sie müssen es als Block anzeigen, um es mit .mx-auto zu zentrieren. Dies kann mit dem integrierten .d-block gemacht werden:

Oder lassen Sie es als inline-block und wickeln Sie es in ein div mit .text-center ein:

Answer 3

Legen Sie einfach alle Bildminiaturen in Zeilen/Spalten-Divs wie folgt:

  # Ihre Bilder hier...

und alles wird gut funktionieren!

Answer 4

Sie können weiterhin mit img-responsive arbeiten, ohne andere Bilder mit dieser Style-Klasse zu beeinflussen.

Sie können diesem Tag die Abschnitts-ID/ div-ID/Klasse voranstellen, um eine Reihenfolge festzulegen, in der dieses img verschachtelt ist. Dieses benutzerdefinierte img-responsive funktioniert nur in diesem Bereich.

Angenommen, Sie haben einen HTML-Bereich definiert als:

Dann kann Ihr CSS sein:

section#Arbeit .img-responsive{
    margin: 0 auto;
}

Hinweis: Diese Antwort bezieht sich auf das potenzielle Auswirkungen der Änderung von img-responsive im Ganzen. Natürlich ist center-block die einfachste Lösung.

Answer 5

Versuchen Sie diesen Code, er funktioniert auch für kleine Symbole mit Bootstrap 4, da es keine center-block-Klasse in Bootstrap 4 gibt. Probieren Sie diese Methode aus, sie wird hilfreich sein. Sie können die Position des Bildes ändern, indem Sie die .col-md-12 auf .col-md-8 oder .col-md-4 setzen, ganz wie Sie möchten.