使用 Twitter Bootstrap 3 将列居中

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

.centered {
  background-color: red;
}
<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 外部留出空间以使其均匀分布 (缩小直到容器宽度等于一列)。

答案

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

方法 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-8col-X-10


方法 2(旧margin:auto

您可以使用已证明的margin: 0 auto;任何列大小居中 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元素,并使列居中位于.container内部,但是由于容器类中的填充,您会注意到实际列大小的最小差异。


更新:

由于 v3.0.1 Bootstrap 具有一个名为center-block的内置类,该类使用margin: 0 auto ,但缺少float:none ,因此可以将其添加到 CSS 中以使其与网格系统一起使用。

使列居中的首选方法是使用 “偏移量”(即: 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-autocenter-block替换为中心display:block元素
  • offset-* mx-auto可用于居中网格列

mx-auto (自动 x 轴边距)将居中display:blockdisplay:flex元素居中,这些元素具有定义的 width ,( %vwpx等)。 默认情况下Flexbox 用于网格列,因此,还有多种 flexbox 居中方法。

演示 Bootstrap 4 水平居中

有关 BS4 中的垂直居中的信息,请参见 https://stackoverflow.com/a/41464397/171456

现在,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>

助手班中心

行列中心使用col-center-block辅助类。

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

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

.center-block {
    float: none !important
}

为什么?

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

PS

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

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

Bootstrap 3现在具有用于此.center-block的内置类

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

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

我对列居中的方法是对列使用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/

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>

使用 Bootstrap v4,只需向.row <div>添加.justify-content-center即可完成此.row

<div class="row justify-content-center">
    <div class="col-1">centered 1 column</div>
</div>

https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

这可行。可能是一种骇人听闻的方式,但是效果很好。测试了响应性(Y)。

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

桌面

反应灵敏

您可以将text-center用于该行,并可以确保内部 div 具有display:inline-block (不具有float )。

如:

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