Wie wird das Rastersystem horizontal zentriert?

Question

Ich möchte das Rastersystem zentrieren, aber es wird nicht, ich dachte, vielleicht hat es etwas mit der Grenze meiner Bilder zu tun ?. hier angeschossen der Bildschirm what it is right now what i want it to be

HTML:

<div class=" container"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <div class="optionBorder"> 
       <img src="images/page-1.svg" height="74px" width="50px"> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="optionBorder"> 
       <img src="images/page-1.svg" height="74px" width="50px"> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="optionBorder"> 
       <img src="images/page-1.svg" height="74px" width="50px"> 
      </div> 
     </div> 
    </div> 
</div> 

CSS:

.optionBorder 
{ 
    border: 1px solid #f5f5f5; 
    height: 130px; 
    width: 130px; 
    line-height: 130px; 
    text-align: center; 
} 

Answer 1

vor Zeile ein weiteres Element Nehmen Sie mit etwas Breite und sie

zum Beispiel Zentrum zu machen.

HTML

<div class="test"> 
    <div class="row"> 
    <div class="col-md-4"> 
     <div class="optionBorder"> 
     <img src="http://placehold.it/350x150" height="74px" width="50px"> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <div class="optionBorder"> 
     <img src="http://placehold.it/350x150" height="74px" width="50px"> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <div class="optionBorder"> 
     <img src="http://placehold.it/350x150" height="74px" width="50px"> 
     </div> 
    </div> 
    </div> 
</div> 

CSS

.test { 
    width: 450px; 
    margin: auto; 
    margin-bottom: 15px; 
} 

bootply

Answer 2

<style> 
.paraentCont{ 
width:100%; 
max-width:300px; 
margin:auto; 
    } 
</style>  

<div class=" container"> 
    <div class="paraentCont"> 
<div class="row"> 
    <div class="col-md-4"> 
     <div class="optionBorder"> 
      <img src="images/page-1.svg" height="74px" width="50px"> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <div class="optionBorder"> 
      <img src="images/page-1.svg" height="74px" width="50px"> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <div class="optionBorder"> 
      <img src="images/page-1.svg" height="74px" width="50px"> 
     </div> 
    </div> 
</div> 

Answer 3

Gib .row feste Breite wie 700px und margin -left/rechts auto Blick auf dieses Beispiel http://www.bootply.com/GFDHc6p5tg

Answer 4

hier Eigentlich gibt es richtigen Weg zu gehen, während Bootsrap mit

1. der vordefinieren Klasse verwendet text-center
2. Verwenden Sie q Bootstrap Helfer wie .inline-block{display: inline-block}

.inline-block{display: inline-block}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class=" container"> 
 
    <div class="row text-center"> 
 
     <div class="col-md-4 inline-block"> 
 
      <div class="optionBorder"> 
 
       <img src="images/page-1.svg" height="74px" width="50px"> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-4 inline-block"> 
 
      <div class="optionBorder"> 
 
       <img src="images/page-1.svg" height="74px" width="50px"> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-4 inline-block"> 
 
      <div class="optionBorder"> 
 
       <img src="images/page-1.svg" height="74px" width="50px"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>