在twitter bootstrap中居中对齐一列[重复]

Posted 2023-03-05

【中文标题】在twitter bootstrap中居中对齐一列[重复]

【英文标题】：Center align a column in twitter bootstrap [duplicate]

【发布时间】：2013-08-04 15:38:34

【问题描述】：

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

【问题讨论】：

Quick Answer

【参考方案1】：

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

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

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

【参考方案2】：

如果你不能放 1 列，你可以简单地把 2 列放在中间... （我只是结合答案） 对于引导程序 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;

另外还有一个解决方案here

【参考方案3】：

问题在这里得到了正确的回答Center a column using 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 类。即，

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

【讨论】：

仅供参考，最新的引导程序会导致重叠

偏移量占用空间，如果您希望内容居中并占用超过 col-lg-10 的空间，这将不起作用

【参考方案4】：

使用 bootstrap 3 实现您想要的最佳方式是...使用 偏移列。有关详细信息，请参阅这些示例：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>

【讨论】：

我之前试过这个方法，它不适用于奇数列。