ブートストラップの行を整列する方法

Question

ちょっと、col-md-2スペーシングの行に5つのイメージを整列しています。しかし、私はページの中央に行を揃えたい。誰も私がこの行を守る方法を助けることができますか？

私はちょうどオフセットcolを試しました。しかし、正常に動作していません。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-2 col-md-offset-1"> 
 
      <img src="images/symbol1.png" alt="step 1"> 
 
     </div> 
 
     <div class="col-md-2"> 
 
      <img src="images/symbol2.png" alt="step 1"> 
 
     </div> 
 
     <div class="col-md-2"> 
 
      <img src="images/symbol3.png" alt="step 1"> 
 
     </div> 
 
     <div class="col-md-2"> 
 
      <img src="images/symbol4.png" alt="step 1"> 
 
     </div> 
 
     <div class="col-md-2"> 
 
      <img src="images/symbol5.png" alt="step 1"> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

これは、あなたが探しているものでしょうか？

<div class="container" style="width: 50%"> 
     <div class="row" align="center"> 
      <div class="col-md-2 col-md-offset-1"> 
       <img src="images/symbol1.png" alt="step 1"> 
      </div> 
      <div class="col-md-2"> 
       <img src="images/symbol2.png" alt="step 1"> 
      </div> 
      <div class="col-md-2"> 
       <img src="images/symbol3.png" alt="step 1"> 
      </div> 
      <div class="col-md-2"> 
       <img src="images/symbol4.png" alt="step 1"> 
      </div> 
      <div class="col-md-2"> 
       <img src="images/symbol5.png" alt="step 1"> 
      </div> 
     </div> 
    </div> 

Answer 2

ブートストラップのalignment classesを使用できます。行に.text-centerクラスを追加するだけです。

結果を確認してください：あなたは `オフセットCOLはproperly`に動作していないことを言うとき

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
    <div class="row text-center"> 
 
     <div class="col-md-2 col-md-offset-1"> 
 
      <img src="//placehold.it/100x100/c69/f9c/?text=1" alt="step 1"> 
 
     </div> 
 
     <div class="col-md-2"> 
 
      <img src="//placehold.it/100x100/9c6/cf9/?text=2" alt="step 1"> 
 
     </div> 
 
     <div class="col-md-2"> 
 
      <img src="//placehold.it/100x100/69c/9cf/?text=3" alt="step 1"> 
 
     </div> 
 
     <div class="col-md-2"> 
 
      <img src="//placehold.it/100x100/c69/f9c/?text=4" alt="step 1"> 
 
     </div> 
 
     <div class="col-md-2"> 
 
      <img src="//placehold.it/100x100/9c6/cf9/?text=5" alt="step 1"> 
 
     </div> 
 
    </div> 
 
</div>