Jautrus vaizdas išlyginti centre bootstrap 3

Darau katalogą naudodamas "Bootstrap 3". Rodomi planšetiniuose kompiuteriuose produktų vaizdai atrodo negražiai dėl mažo dydžio (500x500) ir 767 pikselių pločio naršyklėje. Noriu paveikslėlį patalpinti ekrano centre, bet kažkodėl negaliu. Kas bepadės išspręsti šią problemą?

Nick Chapman
Redaguotas klausimas popietr liepa 2017 в 7:29
Programavimas
image html css twitter-bootstrap alignment
priešpietr rugpjūtis 2013 в 10:20
21 peržiūros
Sprendimas

_Jei naudojate "Bootstrap v3.0.1" ar naujesnę versiją, vietoj jos turėtumėte naudoti šį sprendimą. Jis nepakeičia "Bootstrap" stilių pasirinktiniais CSS, o naudoja "Bootstrap" funkciją.

Mano originalus atsakymas pateikiamas toliau, kad būtų galima jį išsaugoti

Tai maloniai lengva pataisyti. Kadangi .img-responsive iš "Bootstrap" jau nustato display: block, galite naudoti margin: 0 auto, kad išcentruotumėte paveikslėlį:

.product .img-responsive {
    margin: 0 auto;
}
Community
Redaguotas atsakymas popietr gegužė 2017 в 12:26
Komentarai (3)
 
@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}
Komentarai (1)

Papildant jau pateiktus atsakymus, img-responsive kartu su img-thumbnail nustatys display: block į display: inline block.

Komentarai (0)