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

当前回答

更准确地说，Bootstrap的网格系统包含12列，为了将任何内容居中，例如，内容占用一列。需要占用Bootstrap网格的两列，并将内容放置在这两列的一半上。

<div class="row">
   <div class="col-xs-2 col-xs-offset-5 centered">
      ... your content / data will come here ...
   </div>
</div>

'col-xs-offset-5'告诉网格系统从哪里开始放置内容。

'col-xs-2'告诉网格系统内容应该占据多少剩余列。

' centric '将是一个定义的类，它将内容居中。

下面是这个例子在Bootstrap的网格系统中的样子。

列:

1 | 2 | 3 | 4 5 6 7 | | | | | 8 9 10 11 | | | 12

.......offset....... .data. .......不习惯……

2017-12-29 12:24:40

其他回答

只需将显示内容的列设置为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

现在Bootstrap 3.1.1使用.center-block，这个helper类使用列系统。

引导3辅助课程中心。

请检查这个jsfiddle演示:

<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 {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}

2014-03-18 06:31:52

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

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

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

2013-08-09 18:39:37

注意，如果你正在使用Bootstrap 4，你可以在你的行中使用.align-items-center，因为Bootstrap 4现在使用flex系统。

2018-11-29 06:19:01

要居中的颜色-我们需要使用下面的代码。Cols是除保证金外的浮动元素。我们也将它设为浮点数为0，

<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;
    }
}

2014-04-13 04:02:23

使用Twitter Bootstrap 3将列居中

推荐文章

最新文章

标签