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?
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;
}