イメージの2行を中心にする

Question

最近、私はいくつかの（乱雑な）コードを継承し、2行のイメージを中心にしたいと思いました。なぜ私はそれらを中心にさせることができないのか把握しようとしています。ここで

は私のHTMLは、私は、ブートストラップを使用してい

<div class="top1"> 
     <div class="container" style="background-color:#fff; padding-top:10%; padding-bottom:400px; padding-top:15px; padding-left:30px; padding-right:30px;"> 
      <div class="row"> 
       <div class="col-md-2 col-xs-12 inspire_others"> 
        <img style="position: relative;" class="img-responsive" src="images/1.jpg" width="100%" height="auto" /> 
       </div> 
       <div class="col-md-2 col-xs-12 inspire_others" style="margin-top:5%"> 
        <img style="position: relative;" class="img-responsive" src="images/2.jpg" width="100%" height="auto" style="margin-top:5%;" /> <!--width="220px" height="240px"--> 
       </div> 
       <div class="col-md-2 col-xs-12 inspire_others"> 
        <img style="position: relative;" class="img-responsive" src="images/3.jpg" width="100%" height="auto" /> 
       </div> 
      </div> 
      <div class="row" style="padding-top: 50px;"> 
       <div class="col-md-2 col-xs-12 inspire_others"> 
        <img style="position: relative;" class="img-responsive" src="images/4.jpg" width="100%" height="auto" style="margin-top:5%;" /> 
       </div> 
       <div class="col-md-2 col-xs-12 inspire_others" style="margin-top:5%"> 
        <img style="position: relative;" class="img-responsive" src="images/5.jpg" width="100%" height="auto" /> 
       </div> 
       <div class="col-md-2 col-xs-12 inspire_others"> 
        <img style="position: relative;" class="img-responsive" src="images/6.jpg" width="100%" height="auto" style="margin-top:5%;" /> 
       </div> 
      </div> 
     <br /> 
     </div> 
    </div> 

です。

Answer 1

私はあなたのコードをクリーンアップし、デフォルトでは、ブートストラップは、12列を持っているので、あなたの代わりにcol-md-2をcol-md-4を必要とするので、12月3日4およびブートストラップでimgはすでにdisplay:block

[class^="col"] { 
 
    border: green 1px solid 
 
} 
 
img { 
 
    margin: auto 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="top1"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-4 col-xs-12 inspire_others"> 
 
     <img class="img-responsive" src="//dummyimage.com/200x200" /> 
 
     </div> 
 
     <div class="col-md-4 col-xs-12 inspire_others"> 
 
     <img class="img-responsive" src="//dummyimage.com/200x200" /> 
 
     <!--width="220px" height="240px"--> 
 
     </div> 
 
     <div class="col-md-4 col-xs-12 inspire_others"> 
 
     <img class="img-responsive" src="//dummyimage.com/200x200" /> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-md-4 col-xs-12 inspire_others"> 
 
     <img class="img-responsive" src="//dummyimage.com/200x200" /> 
 
     </div> 
 
     <div class="col-md-4 col-xs-12 inspire_others"> 
 
     <img class="img-responsive" src="//dummyimage.com/200x200" /> 
 
     </div> 
 
     <div class="col-md-4 col-xs-12 inspire_others"> 
 
     <img class="img-responsive" src="//dummyimage.com/200x200" /> 
 
     </div> 
 
    </div> 
 
    <br /> 
 
    </div> 
 
</div>

であるため、画像を中央に imgで margin:autoを追加することです

Answer 2

いいニュース！実際には、画像を中央に配置する本当に簡単な方法があります。

tldr; - ただ、<スタイル>タグ内に以下のコードを追加します。

.row { 
    display: flex; 
    justify-content: center; 
} 

それはフレキシボックス（ここでは詳細：http://www.w3schools.com/css/css3_flexbox.asp）にあなたの.rowのdiv要素をオン
ロングストーリー。
justify-contentプロパティは、すべてのdivを.row（およびdiv内のイメージ）の中央に配置します。