CSSグリッドシステム（ブートストラップ3）を使用しているときに画像を中央に配置できません

Question

幅がコンピュータのサイズ程度の場合、画像を中央に配置できないようです。しかし、画像がモバイルのようなコンピュータ画面よりも幅が狭いときは、完全に中心になります。なぜこれをやっているのか分かりません。これを見てください。

https://codepen.io/danii956/pen/PKbgGJ?editors=1100

<div id="introImg" class="col-xs-4 text-center center-block"> 
    <div class="row text-center center-block"> 
    <img class="col-xs-12 img-responsive center-block" src="https://images.pexels.com/photos/8809/light-red-white-home.jpg?w=940&h=650&auto=compress&cs=tinysrgb" alt="A picture of Young Jae taken in front of University of Illinois quad"> 
    </div> 
</div> 

Answer 1

.col-xs-12クラスが追加されますので、他のすべての.col- *クラスが行うようにそれは単にあなたのイメージに、このCSSを追加することでfloat: left;は、問題を修正します、です。

#introImg img.col-xs-12 { 
    float: none; 
} 

これはあなたの.center-blockクラスは、それが何をやるが、イメージが今250ピクセルよりも小さい場合フロートと、それは左に揃えになります。浮動小数点なしでは、中央に整列します。