Как сделать сетку в центре по горизонтали?

Question

Я хочу, чтобы сетка была в центре, но это не так, я думал, может быть, это что-то связано с границей моих фотографий ?. Вот снимок экрана 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

Возьмите еще один элемент, прежде чем ряд с некоторой шириной и сделать их центрирования

, например:.

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

Дайте .row фиксированной ширины, таких как 700px и margin -Выберите/правый auto взгляд на этом примере http://www.bootply.com/GFDHc6p5tg

Answer 4

На самом деле здесь есть правильный путь, используя Bootsrap

1. Используйте класс предопределить text-center
2. Используйте кнопки Bootstrap помощника как .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>