twitter-bootstrap - 将 twitter bootstrap 中的列居中对齐

Question

我已经开始学习 Bootstrap。我的问题是如何水平居中对齐一列，引导程序包含 12 列布局，没有中间数字。更清楚地说，如果它是 11 列布局，中间的数字应该是 6（左边 5 列，中间 1 列，右边 5 列）

Answer 1

问题在这里得到了正确回答使用 Twitter Bootstrap 3 居中列

对于奇数行：即 col-md-7 或 col-large-9 使用此

将 col-centered 添加到要居中的列。

<div class="col-lg-11 col-centered">    

并将其添加到您的样式表中：

.col-centered{
float: none;
margin: 0 auto;
}

对于偶数行：即 col-md-6 或 col-large-10 使用此

只需使用 bootstrap 3 的 offset col 类。IE，

<div class="col-lg-10 col-lg-offset-1">

Answer 2

使用 bootstrap 3，实现您想要的最佳方法是 ...with offsetting columns。请参阅这些示例以获取更多详细信息：http:
//getbootstrap.com/css/#grid-offsetting

简而言之，在没有看到您的 div 的情况下，这里有一个示例可能会有所帮助，而无需使用任何自定义类。请注意如何使用“ col-6 ”以及其中一半是 3 ...所以使用“ offset-3 ”。平均分割将允许您想要的居中间距：

<div class="container">
<div class="col-sm-6 col-sm-offset-3">
your centered, floating column
</div></div>

Answer 3

如果你不能放 1 列，你可以简单地把 2 列放在中间......（我只是结合答案）对于 Bootstrap 3

<div class="row">
   <div class="col-lg-5 ">5 columns left</div>
   <div class="col-lg-2 col-centered">2 column middle</div>
   <div class="col-lg-5">5 columns right</div>
</div>

甚至，您可以通过将其添加到样式来以文本居中列：

.col-centered{
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

此外，这里还有另一种解决方案

Answer 4

我尝试了上面给出的方法，但是当其中一个列中的内容高度动态增加时，这些方法会失败，它基本上会将其他列向下推。

对我来说，基本的表格布局解决方案有效。

// Apply this to the enclosing row
.row-centered {
  text-align: center;
  display: table-row;
}
// Apply this to the cols within the row
.col-centered {
  display: table-cell;
  float: none;
  vertical-align: top;
}