グリッドシステムを水平にセンタリングする方法は？

Question

私はグリッドシステムを中心にしたいと思っていますが、そうではありません、私はおそらくそれが私の写真の境界と関係があると思っていましたか？ここでのスクリーンショットですwhat it is right now what i want it to be

HTML：

<div class=" container"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <div class="optionBorder"> 
       <img src="images/page-1.svg" height="74px" width="50px"> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="optionBorder"> 
       <img src="images/page-1.svg" height="74px" width="50px"> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="optionBorder"> 
       <img src="images/page-1.svg" height="74px" width="50px"> 
      </div> 
     </div> 
    </div> 
</div> 

CSS：

.optionBorder 
{ 
    border: 1px solid #f5f5f5; 
    height: 130px; 
    width: 130px; 
    line-height: 130px; 
    text-align: center; 
} 

Answer 1

一部の幅と行の前に別の要素を取り、たとえばのためにそれらの中心

ます。

HTML

<div class="test"> 
    <div class="row"> 
    <div class="col-md-4"> 
     <div class="optionBorder"> 
     <img src="http://placehold.it/350x150" height="74px" width="50px"> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <div class="optionBorder"> 
     <img src="http://placehold.it/350x150" height="74px" width="50px"> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <div class="optionBorder"> 
     <img src="http://placehold.it/350x150" height="74px" width="50px"> 
     </div> 
    </div> 
    </div> 
</div> 

CSS

.test { 
    width: 450px; 
    margin: auto; 
    margin-bottom: 15px; 
} 

実はここ

bootply

Answer 2

<style> 
.paraentCont{ 
width:100%; 
max-width:300px; 
margin:auto; 
    } 
</style>  

<div class=" container"> 
    <div class="paraentCont"> 
<div class="row"> 
    <div class="col-md-4"> 
     <div class="optionBorder"> 
      <img src="images/page-1.svg" height="74px" width="50px"> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <div class="optionBorder"> 
      <img src="images/page-1.svg" height="74px" width="50px"> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <div class="optionBorder"> 
      <img src="images/page-1.svg" height="74px" width="50px"> 
     </div> 
    </div> 
</div> 

Answer 3

が.row固定幅など700px、そしてに与えますこの例では-left /右auto 見http://www.bootply.com/GFDHc6p5tg

Answer 4

Bootsrap

1. を使用すると、事前定義クラスに.inline-block{display: inline-block}

.inline-block{display: inline-block}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class=" container"> 
 
    <div class="row text-center"> 
 
     <div class="col-md-4 inline-block"> 
 
      <div class="optionBorder"> 
 
       <img src="images/page-1.svg" height="74px" width="50px"> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-4 inline-block"> 
 
      <div class="optionBorder"> 
 
       <img src="images/page-1.svg" height="74px" width="50px"> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-4 inline-block"> 
 
      <div class="optionBorder"> 
 
       <img src="images/page-1.svg" height="74px" width="50px"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

よう text-center

使用Qブートストラップヘルパーを使用しながら、行くための正しい方法があります