Zentrieren von zwei Bildreihen

Question

Ich habe kürzlich etwas (unordentlichen) Code geerbt und möchte zwei Reihen von Bildern zentrieren, jede Zeile mit drei Bildern. Ich habe versucht herauszufinden, warum ich sie nicht ins Zentrum bringen kann.

Hier ist mein HTML

<div class="top1"> 
     <div class="container" style="background-color:#fff; padding-top:10%; padding-bottom:400px; padding-top:15px; padding-left:30px; padding-right:30px;"> 
      <div class="row"> 
       <div class="col-md-2 col-xs-12 inspire_others"> 
        <img style="position: relative;" class="img-responsive" src="images/1.jpg" width="100%" height="auto" /> 
       </div> 
       <div class="col-md-2 col-xs-12 inspire_others" style="margin-top:5%"> 
        <img style="position: relative;" class="img-responsive" src="images/2.jpg" width="100%" height="auto" style="margin-top:5%;" /> <!--width="220px" height="240px"--> 
       </div> 
       <div class="col-md-2 col-xs-12 inspire_others"> 
        <img style="position: relative;" class="img-responsive" src="images/3.jpg" width="100%" height="auto" /> 
       </div> 
      </div> 
      <div class="row" style="padding-top: 50px;"> 
       <div class="col-md-2 col-xs-12 inspire_others"> 
        <img style="position: relative;" class="img-responsive" src="images/4.jpg" width="100%" height="auto" style="margin-top:5%;" /> 
       </div> 
       <div class="col-md-2 col-xs-12 inspire_others" style="margin-top:5%"> 
        <img style="position: relative;" class="img-responsive" src="images/5.jpg" width="100%" height="auto" /> 
       </div> 
       <div class="col-md-2 col-xs-12 inspire_others"> 
        <img style="position: relative;" class="img-responsive" src="images/6.jpg" width="100%" height="auto" style="margin-top:5%;" /> 
       </div> 
      </div> 
     <br /> 
     </div> 
    </div> 

Ich bin mit Bootstrap.

Answer 1

reinigte ich Ihren Code, und Sie müssen col-md-4 statt col-md-2 weil Bootstrap standardmäßig 12 Spalten so 12/3 ist 4. und fügen margin:auto in img Bild zu zentrieren, weil img in Bootstrap bereits display:block

[class^="col"] { 
 
    border: green 1px solid 
 
} 
 
img { 
 
    margin: auto 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="top1"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-4 col-xs-12 inspire_others"> 
 
     <img class="img-responsive" src="//dummyimage.com/200x200" /> 
 
     </div> 
 
     <div class="col-md-4 col-xs-12 inspire_others"> 
 
     <img class="img-responsive" src="//dummyimage.com/200x200" /> 
 
     <!--width="220px" height="240px"--> 
 
     </div> 
 
     <div class="col-md-4 col-xs-12 inspire_others"> 
 
     <img class="img-responsive" src="//dummyimage.com/200x200" /> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-md-4 col-xs-12 inspire_others"> 
 
     <img class="img-responsive" src="//dummyimage.com/200x200" /> 
 
     </div> 
 
     <div class="col-md-4 col-xs-12 inspire_others"> 
 
     <img class="img-responsive" src="//dummyimage.com/200x200" /> 
 
     </div> 
 
     <div class="col-md-4 col-xs-12 inspire_others"> 
 
     <img class="img-responsive" src="//dummyimage.com/200x200" /> 
 
     </div> 
 
    </div> 
 
    <br /> 
 
    </div> 
 
</div>

Answer 2

Gute Nachrichten! Es gibt eine wirklich einfache Möglichkeit, die Bilder zu zentrieren.

tldr; - einfach den Code hinzufügen unten in einem <Stil> tag:

.row { 
    display: flex; 
    justify-content: center; 
} 

Long Story
Es verwandelt Ihr .row div in eine Flexbox (weitere Informationen hier: http://www.w3schools.com/css/css3_flexbox.asp).
Die Eigenschaft "justify-content" zentriert alle divs in .row (und die Bilder in den divs).