Κάνω έναν κατάλογο χρησιμοποιώντας το Bootstrap 3. Όταν εμφανίζονται σε tablet, οι εικόνες των προϊόντων φαίνονται άσχημες λόγω του μικρού τους μεγέθους (500x500) και του πλάτους 767 pixel στο πρόγραμμα περιήγησης. Θέλω να τοποθετήσω την εικόνα στο κέντρο της οθόνης, αλλά για κάποιο λόγο δεν μπορώ. Ποιος θα βοηθήσει στην επίλυση του προβλήματος;
Αν χρησιμοποιείτε Bootstrap v3.0.1 ή μεγαλύτερη έκδοση, θα πρέπει να χρησιμοποιήσετε αυτή τη λύση. Δεν παρακάμπτει τα στυλ του Bootstrap'με προσαρμοσμένα CSS, αλλά αντίθετα χρησιμοποιεί ένα χαρακτηριστικό του Bootstrap.
Η αρχική μου απάντηση εμφανίζεται παρακάτω για την υστεροφημία
Αυτή είναι μια ευχάριστα εύκολη λύση. Επειδή το .img-responsive
από το Bootstrap θέτει ήδη το display: block
, μπορείτε να χρησιμοποιήσετε το margin: 0 auto
για να κεντράρετε την εικόνα:
.product .img-responsive {
margin: 0 auto;
}