Immagine reattiva allineare centro bootstrap 3

Faccio un catalogo usando Bootstrap 3. Quando vengono visualizzate su tablet, le immagini dei prodotti sembrano brutte a causa delle loro piccole dimensioni (500x500) e una larghezza di 767 pixel nel browser. Voglio mettere l'immagine al centro dello schermo, ma per qualche motivo non posso. Chi sarà mi aiuterà a risolvere il problema?

Nick Chapman
Domanda modificata 12º luglio 2017 в 7:29
Programmazione
image html css twitter-bootstrap alignment
27º agosto 2013 в 10:20
17 visualizzazioni
Soluzione

Se stai usando Bootstrap v3.0.1 o superiore, dovresti invece usare questa soluzione. Non sovrascrive gli stili di Bootstrap con CSS personalizzati, ma usa invece una funzione di Bootstrap.

La mia risposta originale è mostrata qui sotto per i posteri

Questa è una correzione piacevolmente facile. Poiché .img-responsive di Bootstrap imposta già display: block, puoi usare margin: 0 auto per centrare l'immagine:

.product .img-responsive {
    margin: 0 auto;
}
Community
Risposta modificata 23º maggio 2017 в 12:26
Commentari (3)
 
@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}
Commentari (1)

Per aggiungere alle risposte già date, avere il img-responsive in combinazione con img-thumbnail imposterà display: block a display: inline block.

Commentari (0)