如何在引導程序中對齊縮略圖

Question

我正在創建一個使用bootstrap和angular.js的小型網站，並在縮略圖對齊中停留。 我有三個縮略圖，我希望它們集中對齊。 我嘗試了很多css屬性，但沒有通過它。 請幫幫我。這是我的代碼

<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>

在這里，是小提琴

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

Answer 1

你有類"pull-left" HTML中的縮略圖上。 刪除后應該居中。

Answer 2

你可以使用bootstrap的助手類： 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>

查看文檔 - 在下面運行演示...

 .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

Bootstrap列具有默認填充和浮動，以及列向左對齊的原因。 如果你想讓div居中，你必須像這樣移除你的浮動

float:none; margin:0 auto;

謝謝