协慌网

登录 贡献 社区

使用 Twitter Bootstrap 3 将列居中

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

.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 引导程序有一个名为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-* div)起作用,因为 Bootstrap 使用float


更新 2018 年

现在使用Bootstrap 4中心方法已经改变了..

  • text-center仍用于display:inline元素
  • mx-autocenter-block替换为中心display:block元素
  • offset-* mx-auto可用于居中网格列

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

演示 Bootstrap 4 水平居中

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

现在 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; */
}