如何使網格系統水平居中？

Question

我想讓網格系統居中，但它不會，我想也許它與我的圖片的邊界有關？ 這是屏幕截圖現在 我想要的 是 什么

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 -left / right auto查看此示例http://www.bootply.com/GFDHc6p5tg

Answer 4

實際上這里有使用Bootsrap的正確方法

1. 使用預定義類text-center
2. 使用.inline-block{display: inline-block} helper，如.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>