Question

我希望将网格系统放在中心位置，但它不会，我想也许它与我的图片有关＆＃39;边界？。这是屏幕截图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

时，这是正确的方法

使用预定义类text-center
使用{Bootstrap helper，如.inline-block{display: inline-block}

＆＃13;

.inline-block{display: inline-block}

＆＃13;

<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>

＆＃13;

如何使网格系统水平居中？

4 个答案: