Zentrum ausrichten Thumbnails in einer Reihe - Bootstrap 3

Question

Ich habe einen folgenden Code -

<div class="row text-center" style="border: 1px solid red; padding: 10px;"> 
     <div class="col-sm-3 col-md-2"> 
      <div class="thumbnail"> 
       <img src="http://fakeimg.pl/154x122/?text=Product"> 
       <div class="caption text-center"> 
        <h4>Product Name</h4> 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-3 col-md-2"> 
      <div class="thumbnail"> 
       <img src="http://fakeimg.pl/154x122/?text=Product"> 
       <div class="caption text-center"> 
        <h4>Product Name</h4> 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-3 col-md-2"> 
      <div class="thumbnail"> 
       <img src="http://fakeimg.pl/154x122/?text=Product"> 
       <div class="caption text-center"> 
        <h4>Product Name</h4> 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-3 col-md-2"> 
      <div class="thumbnail"> 
       <img src="http://fakeimg.pl/154x122/?text=Product"> 
       <div class="caption text-center"> 
        <h4>Product Name</h4> 
       </div> 
      </div> 
     </div> 
</div> 

Screenshot of current implementation

ich nicht in der Lage bin, um sie in der row div zentriert zu bekommen. Ich habe viele Optionen ausprobiert, die hier auf SO gefunden wurden, aber ich konnte nicht arbeiten.

Ich habe möglicherweise eine unterschiedliche Anzahl von Thumbnails, daher kann ich hier keine Pull- oder Offset-Klassen hinzufügen.

Wie werden sie zentral ausgerichtet?

Answer 1

geben Sie Ihre erste Spalte eine Extraklasse col-md-offset-2 Wie Below

<div class="col-sm-3 col-md-offset-2 col-md-2"> 

---

div Wenn Sie offset dann nicht verwenden, können Sie unter Codeklasse center-divs allen col- divs und fügen Sie yur benutzerdefinierte CSS hinzufügen sollten.

.center-divs{ 
    float: none; 
    display: inline-block; 
    margin-right: auto; 
    margin-left: auto; 
}