CSS 使用 Twitter Bootstrap 3 居中列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18153234/
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 a column using Twitter Bootstrap 3
提问by bsr
How do I center a div of one column size within the container (12 columns) in Twitter Bootstrap 3?
如何在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>I want a div, with a class .centeredto be centered within the container. I may use a row if there are multiple divs, but for now I just want a divwith the size of one column centered within the container (12 columns).
我想要一个div, 一个类.centered在容器内居中。如果有多个divs，我可能会使用一行，但现在我只想要一个div大小为一列的容器（12 列）。
I am also not sure the above approach is good enough as the intention is not to offset the divby half. I do not need free spaces outside the divand the contents of the divshrink in proportion. I want to empty space outside the div to be evenly distributed(shrink till the container width is equal to one column).
我也不确定上述方法是否足够好，因为目的不是抵消div一半。我不需要外面的空闲空间div和div按比例缩小的内容。我想清空 div 外的空间以均匀分布（缩小到容器宽度等于一列）。
回答by koala_dev
There are two approaches to centering a column <div>in Bootstrap 3:
<div>在 Bootstrap 3 中有两种方法可以使列居中：
Approach 1 (offsets):
方法 1（偏移量）：
The first approach uses Bootstrap's own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 2 would be centered by adding an offset of 5, that's (12-2)/2.
第一种方法使用 Bootstrap 自己的偏移类，因此它不需要更改标记，也不需要额外的 CSS。关键是设置一个偏移量等于行剩余大小的一半。因此，例如，大小为 2 的列将通过添加 5 的偏移量来居中，即(12-2)/2.
In markup this would look like:
在标记中，这看起来像：
<div class="row">
<div class="col-md-2 col-md-offset-5"></div>
</div>
Now, there's an obvious drawback for this method. It only works for even column sizes, so only .col-X-2, .col-X-4, col-X-6, col-X-8, and col-X-10are supported.
现在，这种方法有一个明显的缺点。它仅适用于偶数列的尺寸，所以只.col-X-2，.col-X-4，col-X-6，col-X-8，和col-X-10支持。
Approach 2 (the old margin:auto)
方法二（旧margin:auto）
You can center any column sizeby using the proven margin: 0 auto;technique. You just need to take care of the floating that is added by Bootstrap's grid system. I recommend defining a custom CSS class like the following:
您可以使用经过验证的技术居中任何列大小margin: 0 auto;。您只需要处理 Bootstrap 的网格系统添加的浮动即可。我建议定义一个自定义 CSS 类，如下所示：
.col-centered{
float: none;
margin: 0 auto;
}
Now you can add it to any column size at any screen size, and it will work seamlessly with Bootstrap's responsive layout:
现在您可以将它添加到任何屏幕尺寸的任何列尺寸，并且它将与 Bootstrap 的响应式布局无缝协作：
<div class="row">
<div class="col-lg-1 col-centered"></div>
</div>
Note:With both techniques you could skip the .rowelement and have the column centered inside a .container, but you would notice a minimal difference in the actual column size because of the padding in the container class.
注意：使用这两种技术，您可以跳过.row元素并使列居中在 a 内.container，但您会注意到由于容器类中的填充，实际列大小的差异很小。
Update:
更新：
Since v3.0.1 Bootstrap has a built-in class named center-blockthat uses margin: 0 auto, but is missing float:none, you can add that to your CSS to make it work with the grid system.
由于 v3.0.1 Bootstrap 有一个名为center-block使用的内置类margin: 0 auto，但缺少float:none，您可以将其添加到您的 CSS 以使其与网格系统一起使用。
回答by Zim
The preferred method of centering columnsis to use "offsets" (ie: col-md-offset-3)
的优选的方法为中心的列是使用“偏移”（即：col-md-offset-3）
Bootstrap 3.x centering examples
For centering elements, there is a center-blockhelper class.
对于居中元素，有一个center-block辅助类。
You can also use text-centerto center text(and inline elements).
您还可以使用text-center到中心的文本（和内联元素）。
Demo: http://bootply.com/91632
EDIT- As mentioned in the comments, center-blockworks on column contents and display:blockelements, but won't work on the column itself (col-*divs) because Bootstrap uses float.
编辑- 如评论中所述，center-block适用于列内容和display:block元素，但不适用于列本身（col-*div），因为 Bootstrap 使用float.
Update 2018
2018 年更新
Now with Bootstrap 4, the centeringmethods have changed..
现在使用Bootstrap 4，居中方法已经改变..
text-centeris still used fordisplay:inlineelementsmx-autoreplacescenter-blockto centerdisplay:blockelementsoffset-*ormx-autocan be used to center grid columns
text-center仍然用于display:inline元素mx-auto替换center-block为中心display:block元素offset-*或mx-auto可用于使网格列居中
mx-auto(auto x-axis margins) will center display:blockor display:flexelements that have a defined width, (%, vw, px, etc..). Flexbox is used by defaulton grid columns, so there are also various flexbox centering methods.
mx-auto（自动 x 轴边距）将居中display:block或display:flex具有定义宽度的元素，（%，vw，px，等...）。Flexbox 默认用于网格列，因此也有各种 flexbox 居中方法。
DemoBootstrap 4 Horizontal Centering
For vertical centering in BS4 seehttps://stackoverflow.com/a/41464397/171456
有关 BS4 中的垂直居中，请参阅https://stackoverflow.com/a/41464397/171456
回答by Sender
Now Bootstrap 3.1.1 is working with .center-block, and this helper class works with the column system.
现在 Bootstrap 3.1.1 正在使用.center-block，并且这个助手类与列系统一起工作。
Bootstrap 3 Helper Class Center.
Bootstrap 3助手类中心。
Please check this jsfiddle DEMO:
请检查这个jsfiddle DEMO：
<div class="container">
<div class="row">
<div class="center-block">row center-block</div>
</div>
<div class="row">
<div class="col-md-6 brd">
<div class="center-block">1 center-block</div>
</div>
<div class="col-md-6 brd">
<div class="center-block">2 center-block</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-center-block">row col-xs-2 col-center-block</div>
</div>
Row column center using col-center-blockhelper class.
使用col-center-block辅助类的行列居中。
.col-center-block {
float: none;
display: block;
margin: 0 auto;
/* margin-left: auto; margin-right: auto; */
}
回答by Sagive SEO
Simply add the following to your custom CSS file. Editing Bootstrap CSS files directly is not recommended and cancels your ability to use a CDN.
只需将以下内容添加到您的自定义 CSS 文件中。不建议直接编辑 Bootstrap CSS 文件，这会取消您使用CDN 的能力。
.center-block {
float: none !important
}
Why?
为什么？
Bootstrap CSS (version 3.7 and lower) uses margin: 0 auto;, but it gets overridden by the float property of the size container.
Bootstrap CSS（3.7 及更低版本）使用margin: 0 auto; ，但它会被大小容器的 float 属性覆盖。
PS:
附注：
After you add this class, don't forget to set classes by the right order.
添加这个类后，不要忘记按正确的顺序设置类。
<div class="col-md-6 center-block">Example</div>
回答by Schmalzy
Bootstrap 3now has a built-in class for this .center-block
Bootstrap 3现在有一个内置的类.center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
If you are still using 2.X then just add this to your CSS.
如果您仍在使用 2.X，那么只需将其添加到您的 CSS 中即可。
回答by Steffi
My approach to center columns is to use display: inline-blockfor columns and text-align: centerfor the container parent.
我对中心列的方法是display: inline-block用于列和text-align: center容器父级。
You just have to add the CSS class 'centered' to the row.
您只需要将 CSS 类“居中”添加到row.
HTML:
HTML：
<div class="container-fluid">
<div class="row centered">
<div class="col-sm-4 col-md-4">
Col 1
</div>
<div class="col-sm-4 col-md-4">
Col 2
</div>
<div class="col-sm-4 col-md-4">
Col 3
</div>
</div>
</div>
CSS:
CSS：
.centered {
text-align: center;
font-size: 0;
}
.centered > div {
float: none;
display: inline-block;
text-align: left;
font-size: 13px;
}
JSFiddle:http://jsfiddle.net/steyffi/ug4fzcjd/
JSFiddle：http : //jsfiddle.net/steyffi/ug4fzcjd/
回答by RustyIngles
Bootstrapversion 3 has a .text-center class.
Bootstrap版本 3 有一个 .text-center 类。
Just add this class:
只需添加这个类：
text-center
It will simply load this style:
它将简单地加载这种样式：
.text-center {
text-align: center;
}
Example:
例子：
<div class="container-fluid">
<div class="row text-center">
<div class="col-md-12">
Bootstrap 4 is coming....
</div>
</div>
</div>
回答by joknawe
With Bootstrap v4, this can be accomplished just by adding .justify-content-centerto the .row<div>
使用 Bootstrap v4，这可以通过添加.justify-content-center到.row<div>
<div class="row justify-content-center">
<div class="col-1">centered 1 column</div>
</div>
https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content
https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content
回答by Ali Gajani
This works. A hackish way probably, but it works nicely. It was tested for responsive (Y).
这有效。可能是一种骇人听闻的方式，但效果很好。它被测试为响应（Y）。
.centered {
background-color: teal;
text-align: center;
}
回答by wali
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<img src="some.jpg">
</div>
</div>
</div>
