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

Es gibt die Klasse .center-block in Twitter Bootstrap 3 (Seit v3.0.1), also verwende:

Answer 2

Wenn Sie Bootstrap v3.0.1 oder höher verwenden, sollten Sie stattdessen diese Lösung verwenden. Es überschreibt nicht die Styles von Bootstrap mit benutzerdefiniertem CSS, sondern verwendet stattdessen ein Bootstrap-Feature.

Meine originale Antwort wird unten aus Gründen der Nachvollziehbarkeit angezeigt

---

Dies ist eine angenehm einfache Lösung. Da .img-responsive von Bootstrap bereits display: block setzt, können Sie margin: 0 auto verwenden, um das Bild zu zentrieren:

.product .img-responsive {
    margin: 0 auto;
}

Answer 3

Fügen Sie nur die Klasse center-block zu einem Bild hinzu, das funktioniert auch mit Bootstrap 4:

Hinweis: center-block funktioniert auch, wenn img-responsive verwendet wird

Answer 4

Verwenden Sie einfach die Klasse .text-center, wenn Sie Bootstrap 3 verwenden.

Hinweis: Das funktioniert nicht mit img-responsive

Answer 5

Dies sollte das Bild zentrieren und dafür sorgen, dass es responsiv ist.