我如何在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之外的空间,以均匀分布(收缩直到容器宽度等于一列)。


当前回答

这可能不是最好的答案,但有一个更有创意的解决方案。正如koala_dev所指出的,列偏移只适用于相等的列大小。然而,通过嵌套行,您也可以实现居中不均匀的列。

坚持最初的问题,你想要在12个网格中居中一列1。

将2的列居中,使其偏移5 创建一个嵌套行,这样在2列中就有了新的12列。 因为你想要居中1列,而1是2的“一半”(我们在步骤1中居中),现在你需要在嵌套行中居中一个6列,这很容易通过偏移3来实现。

例如:

<div class="container">
  <div class="row">
    <div class="col-md-offset-5 col-md-2">
      <div class="row">
        <div class="col-md-offset-3 col-md-6">
          centered column with that has an "original width" of 1 col
        </div>
      </div>
    </div>
  </div>
</div>

看到这里,请注意,你必须增加输出窗口的大小,以便太看到结果,否则列将自动换行。

其他回答

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

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

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

你可以使用文本中心的行,并可以确保内部divs有display:inline-block(与不浮动)。

As:

<div class="container">
    <div class="row text-center" style="background-color : black;">
        <div class="redBlock">A red block</div>
        <div class="whiteBlock">A white block</div>
        <div class="yellowBlock">A yellow block</div>
    </div>
</div>

和CSS:

.redBlock {
    width: 100px;
    height: 100px;
    background-color: aqua;
    display: inline-block
}
.whiteBlock {
    width: 100px;
    height: 100px;
    background-color: white;
    display: inline-block
}
.yellowBlock {
    width: 100px;
    height: 100px;
    background-color: yellow;
    display: inline-block
}

小提琴: http://jsfiddle.net/DTcHh/3177/

居中列的首选方法是使用“偏移量”(即:col-md-offset-3)

引导3。X定心示例

对于居中元素,有一个居中块助手类。

您还可以使用文本中心到文本中心(以及内联元素)。

响应式演示:http://bootply.com/91632

编辑-正如评论中提到的,center-block适用于列内容和display:block元素,但不适用于列本身(col-* divs),因为Bootstrap使用float。


更新2020

现在与Bootstrap 4,定心方法已经改变..

文本中心仍然用于显示:内联元素 Mx-auto将center-block替换为center display:block元素 Offset -*或mx-auto可用于网格列居中

Mx-auto (auto x轴边距)将中心显示:块或显示:具有定义宽度的flex元素(%,vw, px等)。默认情况下,在网格列上使用Flexbox,因此也有各种Flexbox居中方法。

示范引导4水平定心

有关BS4的垂直定心,请参阅https://stackoverflow.com/a/41464397/171456

您可以使用非常灵活的解决方案flexbox到您的Bootstrap。

justify-content: center;

可以居中你的列。

看看flex。

试试这个

<div class="row">
    <div class="col-xs-2 col-xs-offset-5"></div>
</div>

你也可以使用其他col,比如col-md-2等等。