Teen luettelon Bootstrap 3:n avulla. Tableteilla näytettäessä tuotekuvat näyttävät rumilta, koska niiden koko on pieni (500x500) ja selaimen leveys on 767 pikseliä. Haluan laittaa kuvan näytön keskelle, mutta jostain syystä en pysty siihen. Kuka auttaa ratkaisemaan ongelman?
Jos käytät Bootstrap v3.0.1:tä tai uudempaa versiota, käytä tätä ratkaisua sen sijaan. Se ei ohita Bootstrapin tyylejä mukautetulla CSS:llä, vaan käyttää Bootstrapin ominaisuutta.
Alkuperäinen vastaukseni näkyy alla jälkipolville
Tämä on miellyttävän helppo korjaus. Koska Bootstrapin .img-responsive
asettaa jo display: block
, voit käyttää margin: 0 auto
kuvan keskittämiseen:
.product .img-responsive {
margin: 0 auto;
}