关于css：使用Twitter Bootstrap 3将列居中

Center a column using Twitter Bootstrap 3

如何在Twitter引导程序3的容器(12列)中居中一个列大小的分区？

1
2
3

.centered {
background-color: red;
}

1
2
3
4
5

我想要一个div，一个类.centered集中在容器中。如果有多个div，我可以使用一行，但现在我只需要一个div，其大小为一列集中在容器(12列)内。

我也不确定上述方法是否足够好，因为其目的是不将div抵消一半。我不需要div以外的空闲空间，div的内容物按比例收缩。我想将分区外的空白空间均匀分布(缩小到容器宽度等于一列)。

引导程序3中有两种方法可以使列居中：

方法1(偏移量)：

第一种方法使用引导程序自己的偏移量类，因此它不需要更改标记，也不需要额外的CSS。关键是将偏移量设置为行剩余大小的一半。例如，大小为2的列将通过添加偏移量5居中，即(12-2)/2。

在标记中，这看起来像：

现在，这个方法有一个明显的缺点。它只适用于偶数列大小，因此只支持.col-X-2、.col-X-4、col-X-6、col-X-8和col-X-10。

方法2(旧的margin:auto)

您可以使用成熟的margin: 0 auto;技术将任何列大小居中。您只需要注意引导程序的网格系统添加的浮动。我建议定义一个自定义的CSS类，如下所示：

1
2
3
4

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

现在，您可以将它添加到任何屏幕大小的列中，它将与引导程序的响应布局无缝配合：

注意：使用这两种技术，您可以跳过.row元素，并将列集中在.container中，但是由于容器类中的填充，您会注意到实际列大小的最小差异。

更新：

因为v3.0.1引导程序有一个名为center-block的内置类，它使用margin: 0 auto，但缺少float:none，所以可以将它添加到CSS中，使其与网格系统一起工作。

相关讨论

我认为在中心块规则中没有float:none，因为有一个与clearfix无关的规则可以添加到元素中以清除float。
@在这种情况下，diegofernandomurillovalenci .clearfix将不起作用，因为它不移除元素上的float属性(需要使用margin: 0 auto使其居中)，它只是使容器包装内的任何浮动元素。
为了让第二种方法工作，DIV元素需要指定宽度，否则它将占据整个宽度，看起来永远不会居中
@Mudassirali这个问题是关于将列居中，因此我们假设宽度将设置为.col-类。
@考拉，正确！我为像我一样错过的人添加了这个评论。
方法2更好。谢谢。
不能在列上使用，因为没有float:none;。
你能为v3.0.1提供代码吗？我的代码不起作用。

Services</h1> </div> </div> </div> </div>
在您的第一种方法中：如果文本很大，它会自动换行，那么我将使用"col-xs-12 col-xs-offser-2"来处理左边距。
方法2对我有效，但是我必须将vertical-align: top添加到.col-centered类，以确保块的垂直对齐。
为什么这个简单的功能还没有内置到引导中呢？愚蠢的。
以响应为中心的引导程序列minimit.com/articles/solutions tutorials/&hellip；
如果您希望在一行中多列居中，请参阅此答案stackoverflow.com/questions/28683329/&hellip；
@airtonix这是一个延迟的回复，但正如我在mdn的page developer.mozilla.org/en-us/docs/web/css/float中看到的，float属性的初始值是none。所以你可以设置它。具体来说，没有Is a keyword indicating that the element must not float.，如果你想把一列放在中间，这是必要的。如果你只使用margin，它就不会起作用。
选项1并不完全集中在我的网站上，我也无法让选项2工作。有人能告诉我这里缺少什么吗？请访问drewclifton.com-谢谢！
方法2工作正常
我在你的课程中增加了一点内容：.col-centered float:none；margin:0 auto；display:table；text-align:center；现在它对我来说非常适用。
@你的链接上的conorsvensson救了我。出于某种原因，这里的方法2并没有在我的情况下解决多个列，但是.row.text-center解决了这个问题。
引导4，您可以使用justify-content: space-around~~代替方法2。必须有.row容器
很好地解释了"名为center block的内置类，它使用了margin:0 auto但缺少float:none"
bootstrap4中的offset语法已更改(从最新版本开始)。以这个响应为例：col-md-offset-5类现在应该是offset-md-5。
对于引导4：类命名为offset-xx-4 getbootstrap.com/docs/4.0/layout/grid/offseting columns

对中柱的首选方法是使用"偏移"(即：col-md-offset-3)

引导3.x居中示例

对于中心元素，有一个center-block助手类。

您还可以使用text-center将文本(和内联元素)居中。

演示：http://bootply.com/91632

编辑-正如评论中所提到的，center-block处理列内容和display:block元素，但不会处理列本身(col-*div)，因为bootstrap使用float。

更新2018

现在对于引导4，对中方法已经改变了。

text-center仍用于display:inline元素。
mx-auto代替center-block使display:block元素居中。
offset-*或mx-auto可用于网格列的中心。

mx-auto(自动x轴边距)将使具有定义宽度的display:block或display:flex元素(%、vw、px等)居中。默认情况下，在网格列上使用flexbox，因此也有各种flexbox定心方法。

演示引导4水平居中

有关BS4中的垂直居中，请参阅https://stackoverflow.com/a/41464397/171456

相关讨论

现在bootstrap 3.1.1与.center-block一起工作，这个助手类与列系统一起工作。

引导程序3帮助程序类中心。

请检查此jfiddle演示：

1
2
3
4
5
6
7
8
9
10
11
12
13

row center-block

1 center-block

2 center-block

row col-xs-2 col-center-block

Helper classes center

行列中心使用col-center-block助手类。

1
2
3
4
5
6

.col-center-block {
float: none;
display: block;
margin: 0 auto;
/* margin-left: auto; margin-right: auto; */
}

相关讨论

只需将以下内容添加到自定义CSS文件中即可。不建议直接编辑引导CSS文件，并取消使用cdn的功能。

1
2
3

.center-block {
float: none !important
}

为什么？

引导CSS(3.7及更低版本)使用了Margin:0 Auto；，但它会被大小容器的float属性覆盖。

PS：

添加这个类之后，不要忘记按正确的顺序设置类。

Example

相关讨论

bootstrap 3现在有了这个.center-block的内置类。

1
2
3
4
5

.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}

如果您仍然使用2.x，那么只需将其添加到您的CSS中。

相关讨论

我对中心列的方法是对列使用display: inline-block，对容器父级使用text-align: center。

您只需将css类"centered"添加到row中即可。

HTML：

1
2
3
4
5
6
7

Col 1

Col 2

Col 3

CSS：

1
2
3
4
5
6
7
8
9
10

.centered {
text-align: center;
font-size: 0;
}
.centered > div {
float: none;
display: inline-block;
text-align: left;
font-size: 13px;
}

jfiddle：http://jsfiddle.net/steyffi/ug4fzcjd/

相关讨论

引导程序版本3具有.text center类。

只需添加此类：

1	text-center

它只加载这种样式：

1
2
3

.text-center {
text-align: center;
}

例子：

1	Bootstrap 4 is coming....

相关讨论

使用bootstrap v4，只需将.justify-content-center添加到.row中就可以实现这一点。

1	centered 1 column

https://getbootstrap.com/docs/4.0/utilities/flex/调整内容

这是可行的。可能是一种黑客的方式，但它很好地工作。测试其反应性(y)。

1
2
3
4

.centered {
background-color: teal;
text-align: center;
}

Desktop

Responsive

相关讨论

1	<img src="some.jpg">

您可以使用text-center作为行，并确保内部分隔带具有display:inline-block(不带float)。

AS：

1
2
3

A red block
A white block
A yellow block

和CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.redBlock {
width: 100px;
height: 100px;
background-color: aqua;
display: inline-block
}
.whiteBlock {
width: 100px;
height: 100px;
background-color: white;
display: inline-block
}
.yellowBlock {
width: 100px;
height: 100px;
background-color: yellow;
display: inline-block
}

小提琴：http://jsfiddle.net/dtchh/3177/

只需将显示内容的一列设置为col-xs-12(mobile first；-)并将容器配置为仅控制希望中心内容的宽度，因此：

1
2
3
4
5
6

.container {
background-color: blue;
}
.centered {
background-color: red;
}

1
2
3
4
5

1
2
3
4
5

有关演示，请参阅http://codepen.io/kebten/pen/gprnme:-)

要使列居中，我们需要使用下面的代码。列是浮动元素除了边缘自动。我们也会把它设为不浮动，

1
2
3
4
5

为使上述col-lg-1居中，并将类居中，我们将写下：

1
2
3
4
5

.centered {
float: none;
margin-left: auto;
margin-right: auto;
}

要使内容在DIV内居中，请使用text-align:center，

1
2
3

.centered {
text-align: center;
}

如果您只想将其放在桌面和大屏幕上，而不是移动设备上，请使用以下媒体查询。

1
2
3
4
5
6
7

@media (min-width: 768px) {
.centered {
float: none;
margin-left: auto;
margin-right: auto;
}
}

要使DIV仅在移动版上居中，请使用下面的代码。

1
2
3
4
5
6
7

@media (max-width: 768px) {
.centered {
float: none;
margin-left: auto;
margin-right: auto;
}
}

另一种补偿方法是有两个空行，例如：

1	Centered Content

相关讨论

这可能不是最好的答案，但还有一个更具创造性的解决方案。正如Koala_Dev指出的那样，列偏移仅适用于偶数列大小。但是，通过嵌套行，也可以使不均匀列居中。

要坚持原来的问题，您要在12网格内将1列居中。

将2列的中心偏移5

做一个嵌套行，这样在两列中就有了一个新的12列。

由于要使列1居中，而1是2的"一半"(我们在步骤1中对中的内容)，现在需要将列6居中到嵌套行中，这很容易通过偏移它3来完成。

例如：

1	centered column with that has an"original width" of 1 col

请注意，您必须增加输出窗口的大小才能看到结果，否则列将自动换行。

我们可以通过使用表布局机制来实现这一点：

其机制是：

将所有列包装在一个分区中。

将该DIV设置为具有固定布局的表。

将每列设为表格单元格。

使用垂直对齐属性控制内容位置。

示例演示在这里

Enter image description here

这不是我的代码，但它工作得很好(在引导程序3上测试)，而且我不必乱弄col offset。

演示：

1
2
3
4
5
6
7
8
9
10

/* centered columns styles */

.col-centered {
display: inline-block;
float: none;
/* inline-block space fix */
margin-right: -4px;
background-color: #ccc;
border: 1px solid #ddd;
}

1
2
3
4
5

Column 6
Column 6
Column 3
Column 3
Column 3

相关讨论

正如Koala_Dev在他的方法1中使用的那样，我更喜欢使用偏移方法，而不是使用有限的中心块或页边距，但正如他所提到的：

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-10 are supported.

对于奇数列，可以使用以下方法来解决这一问题。

1	// Your content here

您可以在引导程序中使用非常灵活的解决方案flexbox。

1	justify-content: center;

可以将列居中。

检查弯曲。

对于那些希望在没有确切数字填充网格时将列元素居中显示在屏幕上的人，我编写了一小段javascript来返回类名：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) {
var arrayFill = function (size, content) {
return Array.apply(null, Array(size)).map(String.prototype.valueOf, content);
};

var elementSize = parseInt(12 / elementsPerRow, 10);
var normalClassName = 'col-' + screenSize + '-' + elementSize;
var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow;
var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements;
var ret = arrayFill(numberOfFittingElements, normalClassName);
var remainingSize = 12 - numberOfRemainingElements * elementSize;
var remainingLeftSize = parseInt(remainingSize / 2, 10);
return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize));
}

如果您有5个元素，并且希望在md屏幕上每行有3个元素，则执行以下操作：

1 2	colCalculator(5, 3, 'md') >> ["col-md-4","col-md-4","col-md-4","col-md-4 col-md-push-2","col-md-4 col-md-push-2"]

记住，第二个参数必须能被12除尽。

因为我从来没有必要将单个.col-集中在.row中，所以我在目标列的包装.row上设置了以下类。

1
2
3
4
5

.col-center > [class*="col-"] {
float: none;
margin-left: auto;
margin-right: auto;
}

例子

1
2
3
4

Foo

Bar

试试这个代码。

1
2
3
4
5

这里我使用了col-lg-1，偏移量应该是10，以便在大型设备上对中DIV。如果你需要它集中在中型到大型设备上，那么只需将lg改为md，依此类推。

要使引导行中的多个列居中-并且列的数目是奇数，只需将此css类添加到该行中的所有列：

1
2
3
4

.many-cols-centered { // To horizontally center bootstrap odd cols, eg col-lg-9, col-md-3, works well in lg
display:inline-block;
float:none;
}

因此，在HTML中，您有如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<img src='assets/image1.jpg'>
You See
<p>
I love coding.
</p>

<img src='assets/image2.jpg'>
You See
<p>
I love coding.
</p>

<img src='assets/image3.jpg'>
You See
<p>
I love coding.
</p>

如果将此项放在行上，则其中的所有列都将居中：

1
2
3
4

.row-centered {
display: flex;
justify-content: space-between;
}

相关讨论

试试这个

您可以使用其他col以及col-md-2等。

方法1：

1	YOUR CONTENT

方法2：

CSS

1
2
3
4
5
6

.float-center{float: none;}

YOUR CONTENT

引导程序提示、示例和工具：OnArcode

更精确地说，bootstrap的网格系统包含12列，为了使任何内容居中，例如，内容占用一列。其中一个需要占用引导程序网格的两列，并将内容放在两个被占用列的一半上。

1	... your content / data will come here ...

"col-xs-offset-5"告诉网格系统从哪里开始放置内容。

"col-xs-2"告诉网格系统内容应该占用多少剩余的列。

"centered"将是一个将内容居中的定义类。

下面是这个例子在引导程序的网格系统中的样子。

柱：

1 2 3 4 5 6 7 8 9 10 11 12

……偏移量…….数据。……未使用……

我建议只使用text-center类：

1
2
3
4
5

在.row或.col中附加以下代码段。这是用于引导4*的。

1	d-flex justify-content-center

使用bootstrap 4在DIV类中使用mx-auto。

1	You content here

引导4解决方案：

1	Column in the middle, variable width

别忘了加上!important。然后你可以确定元素真的在中间：

1
2
3
4

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

注意：如果您使用的是bootstrap 4，那么可以在您的row中使用.align-items-center，因为bootstrap4现在使用的是flex系统。

相关讨论

Center a column using Twitter Bootstrap 3

Services</h1> </div> </div> </div> </div>