ビューポートの幅の中心が機能しませんか？

Question

現在、画像の横にテキストがあります。テキストが画像の下にあるところに移動し、ビューポートが500ピクセル未満になると画像が中央に表示されるようにします。

HTML

<div class="container"> 
    <div class="row"> 
    <div class=".col-xs-6 .col-md-4" id="whoBox" style="padding-bottom: 15px;"> 
     <div id="whoPic"> 
      <img src="myImgUrl"> 
     </div> 
     <div class="wordBlock"> 
      <p>lorem ipsum</p> 
      <p>lorem ipsum</p> 
      <p>lorem ipsum</p> 
      <p>lorem ipsum</p> 
     </div> 
    </div> 
    </div> 
</div> 

CSS

@media (max-width: 500px) { 
    .wordBlock { 
     float: none; 
     width: 100%; 
     display: inline-block; 
     text-align: center; 
    } 
    div.row #whoPic { 
     display: flex; 
     justify-content: center; 
     align-items: center; 
     margin: 0 auto; 
     display: block; 
    } 
    .whoBox { 
     width: 100%; 
     text-align: center; 
     display: flex; 
     justify-content: center; 
     align-items: center; 
    } 
} 

あなたが見ることができるように、私は、私も試してみたmargin: auto;などフレキシボックス、text-alignを、しようとしてきました。私はすべてimg、画像のID #whoPicを呼び出してみましたが、私はdiv ID #whoBoxを呼び出してみました。

@mediaルールに含まれていない元のCSSを変更すると機能します。

EDIT：これはうまくいきました。私は質問を投稿する前にこれを試したことを誓ってもいいかもしれませんが、それは別のものにあったはずです。あなたが同じのdivにdiplayフレックスを使用して、表示ブロックされている、#whoPic

div.row #whoPic { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    margin: 0 auto; 
} 

Answer 1

それはあなたのimgタグにこのクラスを追加します。

class = "img-responsive"

希望すると助かります。あなたがFlexプロパティ せずに行うことができます

Answer 2

から表示ブロックを取り除くため

div.row #whoPic { 
    float: none; 
    text-align: center; 

Answer 3

はちょうどこのを追加

div.row #whoPic img { 
     display:block; 
     margin:auto; } 
    }