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


当前回答

我处理列居中的方法是对列使用display: inline-block,对父容器使用text-align: center。

你只需要将CSS类“居中”添加到行。

HTML:

<div class="container-fluid">
  <div class="row centered">
    <div class="col-sm-4 col-md-4">
        Col 1
    </div>
    <div class="col-sm-4 col-md-4">
        Col 2
    </div>
    <div class="col-sm-4 col-md-4">
        Col 3
    </div>
  </div>
</div>

CSS:

.centered {
   text-align: center;
   font-size: 0;
}
.centered > div {
   float: none;
   display: inline-block;
   text-align: left;
   font-size: 13px;
}

JSFiddle: http://jsfiddle.net/steyffi/ug4fzcjd/

其他回答

使用bootstrap 4,你可以简单地尝试这里提到的justification -content-md-center

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col col-lg-2">
              1 of 3
        </div>
        <div class="col-md-auto">
            Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
    <div class="row">
        <div class="col">
             1 of 3
        </div>
        <div class="col-md-auto">
                Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
</div>

只需将以下内容添加到自定义CSS文件。不建议直接编辑引导CSS文件,这会取消您使用CDN的能力。

.center-block {
    float: none !important
}

Why?

Bootstrap CSS(3.7及更低版本)使用margin: 0 auto;,但它会被size容器的float属性覆盖。

PS:

添加该类后,不要忘记按正确的顺序设置类。

<div class="col-md-6 center-block">Example</div>

我们可以通过使用表布局机制来实现这一点:

其机理为:

将所有列包装在一个div中。 将该div作为一个具有固定布局的表格。 将每一列作为一个表格单元格。 使用垂直对齐属性来控制内容位置。

示例演示在这里

居中列的首选方法是使用“偏移量”(即: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

如果你把它放在你的行上,里面的所有列都将居中:

.row-centered {
    display: flex;
    justify-content: space-between;
}