如何在 Twitter Bootstrap 3 中的容器(12 列)中将一列大小的 div 居中？ ？
.centered {
background-color: red;
}<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<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 之外留空空间以均匀分布(缩小直到容器宽度等于一列)。
最佳答案
有两种方法可以使列居中 <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: 0 auto; 来居中任何大小的列技术。您只需要处理由 Bootstrap 的网格系统添加的 float 。我建议像下面这样定义自定义 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: 0 auto , 但缺少 float:none ，您可以将其添加到您的 CSS 中以使其与网格系统一起使用。
关于css - 使用 Twitter Bootstrap 3 居中列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18153234/