[解決済み] レスポンシブイメージアラインセンターbootstrap3

質問

Bootstrap3を使ってカタログを作っています。タブレットで表示すると、商品画像が500x500と小さく、ブラウザの横幅が767ピクセルなので、見栄えが悪くなってしまいます。画像を画面の中央に配置したいのですが、なぜかできません。どなたかこの問題を解決してくれる方はいらっしゃいませんか？

解決方法は？

Bootstrap v3.0.1以降を使用している場合は この解決策 代わりに これは、カスタムCSSでBootstrapのスタイルをオーバーライドするのではなく、Bootstrapの機能を利用するものです。

私のオリジナルの答えは、後世に残すために以下に示されています。

これは気持ちいいほど簡単に修正できます。なぜなら .img-responsive は、Bootstrapからすでに display: block を使用することができます。 margin: 0 auto を指定すると、画像が中央に配置されます。

.product .img-responsive {
    margin: 0 auto;
}