Robię katalog używając Bootstrap 3. Podczas wyświetlania na tabletach, obrazy produktów wyglądają brzydko z powodu ich małego rozmiaru (500x500) i szerokości 767 pikseli w przeglądarce. Chcę umieścić obraz na środku ekranu, ale z jakiegoś powodu nie mogę. Kto pomoże rozwiązać ten problem?
_Jeśli używasz Bootstrap v3.0.1 lub nowszego, powinieneś użyć tego rozwiązania zamiast niego. Nie zastępuje ono stylów Bootstrapa za pomocą niestandardowego CSS, ale zamiast tego używa funkcji Bootstrapa.
Moja oryginalna odpowiedź jest pokazana poniżej dla potomności.
To jest przyjemnie łatwa poprawka. Ponieważ .img-responsive
z Bootstrap już ustawia display: block
, możesz użyć margin: 0 auto
, aby wyśrodkować obraz:
.product .img-responsive {
margin: 0 auto;
}