私はBootstrap 3を使ってカタログを作っています。タブレット端末で表示すると、商品画像のサイズが小さく(500x500)、ブラウザの幅が767ピクセルなので、醜く見えてしまいます。画像を画面の中央に配置したいのですが、何らかの理由でできません。誰かこの問題を解決してくれる人はいませんか?
.
_Bootstrap v3.0.1以上を使用している場合は、代わりにこのソリューションを使用してください。このソリューションは、BootstrapのスタイルをカスタムCSSで上書きするのではなく、Bootstrapの機能を使用しています。
私のオリジナルの答えは、後世のために以下に示します。
これは嬉しいほど簡単な修正です。Bootstrapの.img-responsive
ではすでにdisplay: block
が設定されているので、margin: 0 auto
を使って画像を中央に配置することができます。
.product .img-responsive {
margin: 0 auto;
}