ブートストラップのカラムの列を中央に揃えます。

Question

私はブートストラップを使用しています。私はサイズの列3.

<div class= "row1" style = margin-left: auto, margin-right: auto"> 
<div class = col-md-3" > <!--content--> </div> 
<div class = col-md-3" > <!--content--> </div> 
<div class = col-md-3" > <!--content--> </div> 
<div class = col-md-3" > <!--content--> </div> 
<div class = col-md-3" > <!--content--> </div>. 
. 
. 
. 
</div> 

の多くの行を持っているCSS：画像がレンダリングされたHTMLがどのように見えるかを示して

.row1{ 

    text-align:center; 
    margin:0 auto; 

} 

：

私はしたくありません空のスペースを使用し、列を水平方向に中央に配置する必要があります。これを行う方法はありますか？私は具体的に3（私はそれが12まで、したがってジレンマを追加しないことを知っている）のサイズが必要です。 すべてのヘルプは非常に高く評価されています、事前に感謝！

Answer 1

列（col-*-*）要素は、デフォルトではfloat:left;あり、あなたがdisplay:inline-block;とdisplay:inline-block;によって発生したremove the extra spacesを使用する必要がありますが浮かべ要素を揃えることができません。

CSS：

.row1{ 
    text-align:center; 
    margin:0 auto; 
} 

.row1 .col-md-3{ 
    display:inline-block; 
    vertical-align: middle; 
    float: none; 
} 

HTML：トリックをしませんでしたが

<div class="row1"> 
     <div class="col-md-3"> 
     <!--content--> 
     </div><!-- 
    --><div class="col-md-3"> 
     <!--content--> 
     </div><!-- 
    --><div class="col-md-3"> 
     <!--content--> 
     </div><!-- 
    --><div class="col-md-3"> 
     <!--content--> 
     </div><!-- 
    --><div class="col-md-3"> 
     <!--content--> 
     </div> 
</div>