Responsive εικόνα ευθυγράμμιση κέντρο bootstrap 3

Κάνω έναν κατάλογο χρησιμοποιώντας το Bootstrap 3. Όταν εμφανίζονται σε tablet, οι εικόνες των προϊόντων φαίνονται άσχημες λόγω του μικρού τους μεγέθους (500x500) και του πλάτους 767 pixel στο πρόγραμμα περιήγησης. Θέλω να τοποθετήσω την εικόνα στο κέντρο της οθόνης, αλλά για κάποιο λόγο δεν μπορώ. Ποιος θα βοηθήσει στην επίλυση του προβλήματος;

Nick Chapman
Επεξεργασμένη ερώτηση Κάνε Ιούλιος 2017 в 7:29
Προγραμματισμός
image html css twitter-bootstrap alignment
Κάνε Αύγουστος 2013 в 10:20
14 προβολές
Λύση

Αν χρησιμοποιείτε Bootstrap v3.0.1 ή μεγαλύτερη έκδοση, θα πρέπει να χρησιμοποιήσετε αυτή τη λύση. Δεν παρακάμπτει τα στυλ του Bootstrap'με προσαρμοσμένα CSS, αλλά αντίθετα χρησιμοποιεί ένα χαρακτηριστικό του Bootstrap.

Η αρχική μου απάντηση εμφανίζεται παρακάτω για την υστεροφημία

Αυτή είναι μια ευχάριστα εύκολη λύση. Επειδή το .img-responsive από το Bootstrap θέτει ήδη το display: block, μπορείτε να χρησιμοποιήσετε το margin: 0 auto για να κεντράρετε την εικόνα:

.product .img-responsive {
    margin: 0 auto;
}
Community
Επεξεργασμένη απάντηση Κάνε Μάιος 2017 в 12:26
Σχόλια (3)
 
@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}
Σχόλια (1)

Για να προσθέσετε στις απαντήσεις που έχουν ήδη δοθεί, η χρήση του img-responsive σε συνδυασμό με το img-thumbnail θα θέσει το display: block σε display: inline block.

Σχόλια (0)