twitter-bootstrap 在 twitter bootstrap 中居中对齐一列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18032609/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center align a column in twitter bootstrap
提问by Sharath Daniel
I've started learning Bootstrap. My question is how to center align a column horizontally, bootstrap contains 12 column layout, there is no middle number. To be more clear if it was 11 column layout, the middle number would have been 6 (5 columns left, 1 column middle, 5 columns right)
我已经开始学习 Bootstrap。我的问题是如何水平居中对齐一列，bootstrap 包含 12 列布局，没有中间数字。更清楚的是，如果是 11 列布局，中间数字应该是 6（左 5 列，中间 1 列，右 5 列）
回答by Lawrence Black
The question is correctly answered here Center a column using Twitter Bootstrap 3
问题在此处得到正确回答使用 Twitter Bootstrap 3 将专栏置于中心
For odd rows: i.e., col-md-7 or col-large-9 use this
对于奇数行：即 col-md-7 或 col-large-9 使用此
Add col-centered to the column you want centered.
将 col-centric 添加到您想要居中的列。
<div class="col-lg-11 col-centered">
And add this to your stylesheet:
并将其添加到您的样式表中：
.col-centered{
float: none;
margin: 0 auto;
}
For even rows: i.e., col-md-6 or col-large-10 use this
对于偶数行：即 col-md-6 或 col-large-10 使用此
Simply use bootstrap 3's offset col class. i.e.,
只需使用 bootstrap 3 的偏移 col 类。IE，
<div class="col-lg-10 col-lg-offset-1">
回答by martenc
With bootstrap 3 the best way to go about achieving what you want is ...with offsetting columns. Please see these examples for more detail:
http://getbootstrap.com/css/#grid-offsetting
使用 bootstrap 3 实现您想要的效果的最佳方法是 ...使用偏移列。有关更多详细信息，请参阅这些示例：http:
//getbootstrap.com/css/#grid-offsetting
In short, and without seeing your divs here's an example what might help, without using any custom classes. Just note how the "col-6" is used and how half of that is 3 ...so the "offset-3" is used. Splitting equally will allow the centeredspacing you're going for:
简而言之，在没有看到您的 div 的情况下，这里有一个可能有帮助的示例，无需使用任何自定义类。请注意“ col-6”的使用方式以及其中的一半是3 ...因此使用“ offset-3”。平均拆分将允许您要使用的居中间距：
<div class="container">
<div class="col-sm-6 col-sm-offset-3">
your centered, floating column
</div></div>
回答by efirat
If you cannot put 1 column, you can simply put 2 column in the middle... (I am just combining answers) For Bootstrap 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>
Even, you can text centered column by adding this to style:
甚至，您可以通过将其添加到样式中来文本居中列：
.col-centered{
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
Additionally, there is another solution here
此外，还有另一种解决方案在这里
回答by SkyKOG
I tried the approaches given above, but these methods fail when dynamically the height of the content in one of the cols increases, it basically pushes the other cols down.
我尝试了上面给出的方法，但是当其中一个列中的内容高度动态增加时，这些方法会失败，它基本上将其他列向下推。
for me the basic table layout solution worked.
对我来说，基本的表格布局解决方案奏效了。
// 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;
}
