ブーツストラップの中央にサムネイルを整列する方法

Question

bootstrapとangular.jsを使用して小さなウェブサイトを作成していて、サムネイルのアライメントでスタックしています。私は3つのサムネイルを持っており、それらを中央で整列させたい。私は非常に多くのCSSプロパティを試しましたが、それを通過しませんでした。 out.Hereは私のコードここ

<div ng-controller = "ModuleController as module"> 
    <div class="row"> 
    <div class="col-md-4 col-sm-4 text-center" ng-repeat="i in module.item" ng-hide="module.item.soldOut"> 
     <img class="img img-responsive center-block" ng-src="{{i.images[0]}}" /><br> 
     <ul class="clearfix"> 
     <li class="pull-left thumbnail" ng-repeat="image in i.images"> 
      <a href=""><img ng-src="{{image}}"/></a> 
     </li> 
     </ul> 
     <span> <b>{{i.name}}</b> </span><br> 
     <span> <b>{{i.price | currency : '&#8377;' }}</b> </span><br> 
     <span> <b>{{i.description}} </span></b> <br><br> 
     <span> <button class="btn btn-primary" ng-show="i.canPurchase">Add to Cart</button> </span> 
    </div> 
    </div> 
</div> 

である私を助けてください、あなたがHTMLのサムネイル画像にクラス"pull-left"を持っているフィドル

https://jsfiddle.net/rajatgarg/vgknhc6f/1/

Answer 1

です。あなたがそれを取り除いた後に中心に置かなければならない。

Answer 2

ブートストラップのヘルパークラス：center-blockを使用できます。

私はdivで画像を包んだ - それより下でトリックを行うようだのように：

<div class="center-block"> 
    <a href="#" class=""> 
     <img src="http://lorempixel.com/50/50/" /> 
    </a> 
    <a href="#" class=""> 
     <img src="http://lorempixel.com/50/50/" /> 
    </a> 
    <a href="#" class=""> 
     <img src="http://lorempixel.com/50/50/" /> 
    </a> 
    </div> 
</div> 

See Docs - 以下のデモを実行している...

.col-md-4 { 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 
<div class="row"> 
 
    <div class="col-md-4 col-sm-4 text-center"> 
 
    <img class="img img-responsive center-block" src="http://lorempixel.com/75/75/" /> 
 
    <div class="row"> 
 
     <br> 
 
     <div class="center-block"> 
 
     <a href="#" class=""> 
 
      <img src="http://lorempixel.com/50/50/" /> 
 
     </a> 
 
     <a href="#" class=""> 
 
      <img src="http://lorempixel.com/50/50/" /> 
 
     </a> 
 
     <a href="#" class=""> 
 
      <img src="http://lorempixel.com/50/50/" /> 
 
     </a> 
 
     </div> 
 
    </div> 
 

 
    <span> <b>name</b> </span> 
 
    <br> 
 
    <span> <b>currency</b> </span> 
 
    <br> 
 
    <span> <b>description</b> </span> 
 
    <br> 
 
    <br> 
 
    <span> <button class="btn btn-primary">Add to Cart</button> </span> 
 
    </div> 
 
</div>

Answer 3

ブートストラップ列にはデフォルトのパディングと浮動小数点があり、その理由は列が左揃えになっているためです。あなたは