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

Versuchen Sie dies:

.img-responsive{
    display: block;
    height: auto;
    max-width: 100%;
      margin:0 auto;
}
.Image{
  background:#ccc;
  padding:30px;
}

Answer 2

@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}

Answer 3

Um die bereits gegebenen Antworten zu ergänzen, bewirkt das Hinzufügen von img-responsive in Kombination mit img-thumbnail, dass display: block zu display: inline block gesetzt wird.

Answer 4

.

   .tocenter {
    margin:0 auto;
    display: inline;
    }

Answer 5

Du kannst das ausprobieren.