使用Twitter Bootstrap 3将列居中

Question

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

请看起初小提琴.

.centered {
  background-color: red;
}

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

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

Answer 1

<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-4,col-X-6,col-X-8和col-X-10支持.

方法2(旧边距:自动)

您可以使用经过验证的技术将任何列大小居中margin:auto,您只需要处理Bootstrap网格系统添加的浮动.我建议定义一个自定义CSS类,如下所示:

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

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

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

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

更新:

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

Answer 2

的优选的方法为中心的列是使用"偏移"(即:col-md-offset-3)

Bootstrap 3.x居中示例

对于居中元素,有一个center-block 辅助类.

您还可以使用text-center到文本居中(和内联元素).

演示:http://bootply.com/91632

编辑 - 如评论中所述,center-block对列内容和display:block元素有效,但不会对列本身(col-*div)起作用,因为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具有一元件限定的宽度,( ,,% 等.).默认情况下,Flexbox在网格列上使用,因此还有各种flexbox居中方法.vwpx

演示 Bootstrap 4水平居中

有关BS4中的垂直居中,请参阅 /sf/answers/2902507821/

Answer 3

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

Bootstrap 3 Helper Class Center.

请检查这个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; */
}

Answer 4

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

.center-block {
    float: none !important
}

为什么？

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

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

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

Answer 5

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

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

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

Answer 6

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

Answer 7

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>   

Answer 8

使用Bootstrap v4,只需添加.justify-content-center到.row <div>

<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

Answer 9

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

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

Answer 10

使用 bootstrap 4，您可以简单地尝试这里justify-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>

Answer 11

您可以使用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/

Answer 12

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

.container {
  background-color: blue;
}
.centered {
    background-color: red;
}

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

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

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

Answer 13

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>

Answer 14

要使我们需要使用以下代码.cols是除了margin auto之外的浮动元素.我们也将它设置为float,

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

为了使上面的col-lg-1居中,我们将写:

.centered {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

要将内容集中在div中,请使用text-align:center,

.centered {
    text-align: center;
}

如果您只想将它​​居中放在桌面和大屏幕上,而不是移动设备上,请使用以下媒体查询.

@media (min-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

并且仅在移动版本中居div,请使用以下代码.

@media (max-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

Answer 15

抵消的另一种方法是有两个空行,例如:

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>

Answer 16

这可能不是最佳答案,但还有一个更有创意的解决方案.正如koala_dev所指出的,列偏移仅适用于偶数列大小.但是,通过嵌套行,您也可以实现对齐不均匀的列.

要坚持原始问题,你想在12格的网格中居中一列1.

1. 将一列2对齐,将其偏移5
2. 创建一个嵌套行,这样您就可以在2列中获得新的12列.
3. 由于您希望将列居中于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>

看到这个小提琴,请注意你必须增加输出窗口的大小,以便看到结果,否则列将包装.

Answer 17

这不是我的代码，但它工作得很好（在 Bootstrap 3 上测试过）而且我不必搞乱 col-offset。

演示：

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

Answer 18

在 .row 或 .col 中附加以下代码段。这适用于 Bootstrap 4*。

d-flex justify-content-center