使用Twitter Bootstrap 3将列居中

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

当前回答

将下面的代码片段添加到.row或.col中。这是Bootstrap 4*。

d-flex justify-content-center

2018-12-31 06:44:44

其他回答

只需将以下内容添加到自定义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>

2013-12-15 03:12:45

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

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

如果你还在用2。X然后把它添加到你的CSS。

2013-08-09 18:39:37

您可以使用非常灵活的解决方案flexbox到您的Bootstrap。

justify-content: center;

可以居中你的列。

看看flex。

2017-11-06 08:45:17

Bootstrap 4解决方案:

<div class="container">
  <div class="row">
    <div class="col align-self-center">
      Column in the middle, variable width
    </div>
  </div>
</div>

2019-05-03 08:39:10

对于Bootstrap v3和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

2018-06-25 02:57:38

使用Twitter Bootstrap 3将列居中

推荐文章

最新文章

标签