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

当前回答

这可能不是最好的答案，但有一个更有创意的解决方案。正如koala_dev所指出的，列偏移只适用于相等的列大小。然而，通过嵌套行，您也可以实现居中不均匀的列。

坚持最初的问题，你想要在12个网格中居中一列1。

将2的列居中，使其偏移5 创建一个嵌套行，这样在2列中就有了新的12列。因为你想要居中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>

看到这里，请注意，你必须增加输出窗口的大小，以便太看到结果，否则列将自动换行。

2016-03-02 05:35:36

其他回答

试试这段代码。

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

这里我使用了col-lg-1，偏移量应该是10，以便在大型设备上正确地居中div。如果您需要它集中在中型到大型设备，那么只需将lg更改为md等等。

2017-08-24 16:43:45

我们可以通过使用表布局机制来实现这一点:

其机理为:

将所有列包装在一个div中。将该div作为一个具有固定布局的表格。将每一列作为一个表格单元格。使用垂直对齐属性来控制内容位置。

示例演示在这里

2017-03-30 13:37:30

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

因为我从不需要在.row中仅居中一个.col-，所以我将以下类设置为目标列的.row的包装。

.col-center > [class*="col-"] {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

例子

<div class="full-container">
    <div class="row col-center">
        <div class="col-xs-11">
            Foo
        </div>
        <div class="col-xs-11">
            Bar
        </div>
    </div>
</div>

2015-04-27 21:41:44

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

.container { 背景颜色:蓝色; ｝ .centered { 背景颜色:红色; ｝ <body class="container col-xs-offset-3 col-xs-6"> <div class=" font - family -宋体"> <img data-src="holder.js/100x100" alt="" /> . < / div > 身体< / >

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

2015-06-13 13:14:27

使用Twitter Bootstrap 3将列居中

推荐文章

最新文章

标签