使用Twitter Bootstrap 3将列居中

小编典典

使用Twitter Bootstrap 3将列居中

css

如何在Twitter Bootstrap 3的容器（12列）中将一列大小的div居中？

.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，该类在容器内居中。如果有多个divs，我可能会使用一行，但是现在我只想要a
div，其大小以一列为中心位于容器内（12列）。

我也不确定上述方法是否足够好，因为其目的不是要抵消div一半。我不需要外部的自由空间，div并且内容的内容div按比例缩小。我想在div外部留出空间以使其均匀分布 （缩小直到容器宽度等于一列）。

阅读 311

2020-05-16

共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`）

您可以使用成熟的技术将 任何列大小居中margin:0auto;。您只需要注意由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 Bootstrap具有一个名为的内置类，该类center-block使用margin:0auto，但缺少float:none，因此可以将其添加到CSS中以使其与网格系统一起使用。

2020-05-16