我如何在Twitter Bootstrap 3的容器(12列)中心一个列大小的div ?

.centered { 背景颜色:红色; } <!——最新编译和最小化的CSS——> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="匿名"> <身体类= "容器" > <div class=" font - family -宋体"> <img data-src="holder.js/100x100" alt="" /> . < / div > 身体< / >

我想要一个div,类。居中在容器中。如果有多个div,我可能会使用一行,但现在我只想要一个div的大小为一列居中容器(12列)。

我也不确定上面的方法是否足够好,因为目的不是将div抵消一半。我不需要在div之外的自由空间和div的内容按比例缩小。我想清空div之外的空间,以均匀分布(收缩直到容器宽度等于一列)。


当前回答

这不是我的代码,但它工作得很好(在Bootstrap 3上进行了测试),而且我不必在冷偏移方面搞得一团糟。

演示:

/* centered columns styles */ .col-centered { display: inline-block; float: none; /* inline-block space fix */ margin-right: -4px; background-color: #ccc; border: 1px solid #ddd; } <div class="container"> <div class="row text-center"> <div class="col-xs-6 col-centered">Column 6</div> <div class="col-xs-6 col-centered">Column 6</div> <div class="col-xs-3 col-centered">Column 3</div> <div class="col-xs-3 col-centered">Column 3</div> <div class="col-xs-3 col-centered">Column 3</div> </div> </div>

其他回答

正如koala_dev在他的方法1中使用的那样,我更喜欢offset方法,而不是使用有限的center-block或margin方法,但正如他提到的:

现在,这种方法有一个明显的缺点,它只适用于相同大小的列,因此只支持.col- x -2, .col- x -4, col-X-6, col-X-8和col-X-10。

对于奇数列,可以使用以下方法求解。

<div class="col-xs-offset-5 col-xs-2">
    <div class="col-xs-offset-3">
        // Your content here
    </div>
</div>

Bootstrap版本3有一个.text-center类。

只需添加这个类:

text-center

它只会加载这个样式:

.text-center {
    text-align: center;
}

例子:

<div class="container-fluid">
  <div class="row text-center">
     <div class="col-md-12">
          Bootstrap 4 is coming....
      </div>
  </div>
</div>   

只需将显示内容的列设置为col-xs-12 (mobile-first;-),并仅配置容器来控制您希望居中内容的宽度,因此:

.container { 背景颜色:蓝色; } .centered { 背景颜色:红色; } <body class="container col-xs-offset-3 col-xs-6"> <div class=" font - family -宋体"> <img data-src="holder.js/100x100" alt="" /> . < / div > 身体< / >

<body class="container col-xs-offset-1 col-xs-10"> <div class=" font - family -宋体"> <img data-src="holder.js/100x100" alt="" /> . < / div > 身体< / >

有关演示,请参见http://codepen.io/Kebten/pen/gpRNMe:-)

Bootstrap 3现在有一个内置的类。center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

如果你还在用2。X然后把它添加到你的CSS。

试试这段代码。

<body class="container">
    <div class="col-lg-1 col-lg-offset-10">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

这里我使用了col-lg-1,偏移量应该是10,以便在大型设备上正确地居中div。如果您需要它集中在中型到大型设备,那么只需将lg更改为md等等。