Responsive Bild ausrichten Zentrum bootstrap 3

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

Nick Chapman
Bearbeitete Frage 12. Juli 2017 в 7:29
Programmierung
image html css twitter-bootstrap alignment
27. August 2013 в 10:20
19 Aufrufe
Lösung

Wenn Sie Bootstrap v3.0.1 oder höher verwenden, sollten Sie stattdessen [diese Lösung] (https://stackoverflow.com/a/20396826/383609) verwenden. Sie überschreibt die Stile von Bootstrap nicht mit benutzerdefiniertem CSS, sondern verwendet stattdessen eine Bootstrap-Funktion.

Meine ursprüngliche Antwort ist unten für die Nachwelt wiedergegeben.

Dies ist eine erfreulich einfache Lösung. Weil .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;
}
Community
Bearbeitete Antwort 23. Mai 2017 в 12:26
Kommentare (3)
 
@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}
Kommentare (1)

Um die bereits gegebenen Antworten zu ergänzen, wird img-responsive in Kombination mit img-thumbnail display: block auf display: inline block setzen.

Kommentare (0)