题 使用Twitter Bootstrap 3将列居中


如何将容器中的一个列大小的div(12列)居中 Twitter Bootstrap 3。

请看启动器 小提琴

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

所以,我想要一个 div,上课 centered 在容器中居中。如果有多个div,我可以使用一行,但是现在我只想要一个在容器中居中的一列大小的div(12列)。

我也不确定上述方法是否足够好,因为意图不是要抵消 div 一半。我不需要外面的空闲空间 div 和的内容 div 比例缩小。我要 div外的空白空间要均匀分布 (缩小到容器宽度==一列)。


972
2017-08-09 18:24


起源




答案:


有两种方法可以使列居中 <div> 在Bootstrap 3中:

方法1(抵消):

第一种方法使用Bootstrap自己的偏移类,因此它不需要更改标记,也不需要额外的CSS。关键是要 设置一个偏移量等于该行剩余大小的一半。因此,例如,大小为2的列将通过添加5的偏移量来居中 (12-2)/2

在标记中,这看起来像:

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

现在,这种方法有一个明显的缺点, 它仅适用于均匀的色谱柱尺寸,所以只有 .col-X-2.col-X-4col-X-6col-X-8 和 col-X-10 得到支持。


方法2(旧边距:自动)

您可以 以任何列大小为中心 通过使用证明 margin: 0 auto; 技术,你只需要处理Bootstrap的网格系统添加的浮动。我建议定义一个自定义CSS类,如下所示:

.col-centered{
    float: none;
    margin: 0 auto;
}

现在,您可以将其添加到任何屏幕大小的任何列大小,并且它将与Bootstrap的响应式布局无缝协作:

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

注意: 使用这两种技术,您可以跳过 .row 元素并使列居中于a .container 但是由于容器类中的填充,您会注意到实际列大小的最小差异。


更新:

从v3.0.1开始,Bootstrap有一个名为的内置类 center-block 用的 margin: 0 auto 但是失踪了 float:none。您可以将其添加到CSS以使其与网格系统一起使用。


1748
2017-08-09 18:45



我认为中心块规则中没有float:none,因为有一个clearfix独立规则,您可以添加到清除浮点数的元素。 - Diego Fernando Murillo Valenci
@DiegoFernandoMurilloValenci .clearfix 在这种情况下不会起作用,因为它不会删除元素上的浮动属性(需要居中使用 margin: 0 auto),它只是让一个容器包裹里面的任何浮动元素 - koala_dev
不能在列上使用它,因为没有 float:none; - airtonix
响应式中心引导列 minimit.com/articles/solutions-tutorials/... - Gothburz
如果您想在一行中居中多个列,请参阅此答案 stackoverflow.com/questions/28683329/... - Conor Svensson


首选的方法 中心列 是使用“抵消”(即: col-md-offset-3

Bootstrap 3.x居中示例

对于 定心元素,有一个 center-block  助手班

你也可以使用 text-center 至 中心文本 (和内联元素)。

演示http://bootply.com/91632

编辑  - 如评论中所述, center-block 适用于列内容和 display:block 元素,但不会对列本身起作用(col-* divs)因为Bootstrap使用 float


更新2018年

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

  • text-center仍然用于 display:inline 分子
  • mx-auto 取代 center-block 到中心 display:block 分子
  • offset-*  要么  mx-auto 可用于居中网格列

mx-auto (自动x轴边距)将居中 display:block 要么 display:flex 有一个的元素 定义宽度,((%vwpx等等。)。 默认情况下使用Flexbox 在网格列上,因此还有各种flexbox居中方法。

演示 Bootstrap 4水平居中

对于BS4中的垂直居中,请参阅  https://stackoverflow.com/a/41464397/171456


245
2017-12-03 18:12



不幸的是,这个辅助类不适用于列系统,因为它不处理float属性。看到 这个演示 例如。 - koala_dev
这只需要一个中心区块{float:none; },它的工作原理。 bootply.com/122268 - Matias Vad
不确定OP,但我到这里寻找 text-center 细节 - 没有提供其他答案。这个得到我的投票。 - domoarigato
不能在列上使用它,因为没有 float:none; - airtonix
我编辑了有关抵消的答案。 - Themes.guide


现在Bootstrap 3.1.1正在使用 .center-block,这个帮助器类与列系统一起使用。

Bootstrap 3 助手班级中心

请检查 这个jsfiddle DEMO

<div class="container">
    <div class="row">
        <div class="center-block">row center-block</div>
    </div>
    <div class="row">
        <div class="col-md-6 brd">
            <div class="center-block">1 center-block</div>
        </div>
        <div class="col-md-6 brd">
            <div class="center-block">2 center-block</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-2 col-center-block">row col-xs-2 col-center-block</div>
</div>

Helper classes center

行列中心使用 col-center-block 助手班。

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}

90
2018-03-18 06:31



我没有添加这个工作 float:none通过确保div中心块具有 style="width : ?px" 风格适用于它。例如图像宽度。适用于3.2.2 - ppumkin
保证金:0自动; - 足够的边距左边+边距右边 - Mikhail Morgunov


只需将此添加到您的自定义CSS文件中,不建议直接编辑Bootstrap CSS文件并取消使用cdn的能力。

.center-block {
    float: none !important
}

为什么? 

Bootstrap CSS(Ver 3.7及更低版本)使用: 保证金:0自动;,但它被size容器的float属性覆盖。

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

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

50
2017-12-15 03:12



只做了.center-block来做这个答案。 - João Martins
我正在使用Bootstrap 3.3.7 这是唯一适合我的方法! - illagrenan
这很有效。但不要想 !important 是必要的 - Gianfranco P.
@GianfrancoP。 P.你的权利,但......这取决于负载顺序,我想提供一个万无一失的方法。 - Sagive SEO


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

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

如果您仍在使用2.X,则只需将其添加到CSS中即可。


37
2017-08-09 18:39



这可能会给你最简单的效果。如果要采用更模块化的方法,也可以在.centered类上抛出宽度或添加第二个类 - Matt Lambert
添加float:none; to .centers允许您将类移动到容器中。保持代码清洁 - Adam Patterson
不能在列上使用它,因为没有 float:none; - airtonix


我对中心列的方法是使用 display: inline-block 对于列和 text-align: center 对于容器父级。

你只需要将CSS类'居中'添加到 row

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/


31
2018-02-16 10:27



这是唯一可以100%有效工作的答案 - 其他人工作,但是当引导程序切换到移动视图时(项目移动到左侧)不行。 - Levi Fuller
这是唯一一个对我有用的方法,.center-block只适用于一列,我需要将所有列中心化,而不管它有多少。 - cjohansson
只有对我有用的解决方案。其他的只在浏览器是一个窗口时工作(不是全屏)。 - kiwicomb123


引导 版本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>   

25
2017-07-16 14:20



澄清这门课程的添加位置? - aksu
嗨@aksu,你不必添加任何.css。看看提供的例子。 - JoshYates1980


这很有效。可能是一种hackish方式,但它很好用。测试了响应性(Y)。

.centered {
    background-color: teal;
    text-align: center;
}

Desktop

Responsive


11
2017-08-09 21:47



仅因为元素具有内联的diplay而起作用。一个 img 可以设置为块。 - ProfileTwist
但它有效,我没有理由拒绝投票。 - Ali Gajani
也许在你的孤立测试案例中。我想补充一下 .centered img { display: inline; } 你的答案,然后它将值得投票。 - ProfileTwist
没问题。我相信OP会找到他/她的答案:) - Ali Gajani
在bootstrap 3中,.text-center类本身也做同样的事情,正如我在上面所学到的。 - domoarigato