English 如何在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>我想要一个div类.centered，该类在容器内居中。如果有多个divs，我可以使用一行，但是现在我只想要一个div以一列为中心在容器内（12列）的大小。
我也不确定上述方法是否足够好，因为其目的不是要抵消div一半。我不需要外部的自由空间，div并且内容的内容div按比例缩小。我想在div之外的空白处均匀分布（缩小直到容器宽度等于一列）。
Try this
<div class="row">
<div class="col-xs-2 col-xs-offset-5"></div>
</div>
You can use other col as well like col-md-2, etc.
Try this code.
<body class="container">
<div class="col-lg-1 col-lg-offset-10">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>
Here I have used col-lg-1, and the offset should be 10 for properly centered the div on large devices. If you need it to center on medium-to-large devices then just change the lg to md and so on.
If you put this on your row, all of the columns inside will be centered:
.row-centered {
display: flex;
justify-content: space-between;
}
Append the following snippet inside your .row or your .col. This is for Bootstrap 4*.
d-flex justify-content-center
I suggest simply to use the class text-center:
<body class="container">
<div class="col-md-12 text-center">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>
You can use the very flexible solution flexbox to your Bootstrap.
justify-content: center;
can center your column.
Check out flex.
Because I never have the need to center only a single .col- within a .row, I set the following class on the wrapping .row of my target columns.
.col-center > [class*="col-"] {
float: none;
margin-left: auto;
margin-right: auto;
}
Example
<div class="full-container">
<div class="row col-center">
<div class="col-xs-11">
Foo
</div>
<div class="col-xs-11">
Bar
</div>
</div>
</div>
This is probably not the best answer, but there is one more creative solution to this. As pointed out by koala_dev the column offsetting works only for even column sizes. However, by nesting rows you can achieve centering uneven columns as well.
To stick with the original question where you want to center a column of 1 inside a grid of 12.
For example:
<div class="container">
<div class="row">
<div class="col-md-offset-5 col-md-2">
<div class="row">
<div class="col-md-offset-3 col-md-6">
centered column with that has an "original width" of 1 col
</div>
</div>
</div>
</div>
</div>
See this fiddle, please note that you have to increase the size of the output window in order too see the result, otherwise the columns will wrap.
With bootstrap 4 you can simply try justify-content-md-center as it is mentioned here
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
To center the col- we need to use the below code. cols are floater elements besides margin auto. We will also set it to float none,
<body class="container">
<div class="col-lg-1 col-md-4 centered">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>
To center the above col-lg-1 with class of centered, we will write:
.centered {
float: none;
margin-left: auto;
margin-right: auto;
}
To center the content inside the div, use text-align:center,
.centered {
text-align: center;
}
If you want to center it only on the desktop and larger screen, not on mobile, then use the following media query.
@media (min-width: 768px) {
.centered {
float: none;
margin-left: auto;
margin-right: auto;
}
}
And to center the div only on mobile version, use the below code.
@media (max-width: 768px) {
.centered {
float: none;
margin-left: auto;
margin-right: auto;
}
}
The mechanism is:
您可以使用text-center该行，并可以确保内部div具有display:inline-block（不带float）。
如：
<div class="container">
<div class="row text-center" style="background-color : black;">
<div class="redBlock">A red block</div>
<div class="whiteBlock">A white block</div>
<div class="yellowBlock">A yellow block</div>
</div>
</div>
和CSS：
.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
}
偏移的另一种方法是具有两个空行，例如：
<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<img src="some.jpg">
</div>
</div>
</div>
只需将显示内容的一列设置为col-xs-12（移动设备优先;-），并配置容器即可控制您希望居中内容的宽度，因此：
.container {
background-color: blue;
}
.centered {
background-color: red;
}<body class="container col-xs-offset-3 col-xs-6">
<div class="col-xs-12 centered">
<img data-src="holder.js/100x100" alt="" />
</div>
</body><body class="container col-xs-offset-1 col-xs-10">
<div class="col-xs-12 centered">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>有关演示，请参见http://codepen.io/Kebten/pen/gpRNMe :-)
这可行。可能是一种骇人听闻的方式，但是效果很好。已对其进行响应性测试（Y）。
.centered {
background-color: teal;
text-align: center;
}
Bootstrap版本3具有.text-center类。
只需添加此类：
text-center
它将简单地加载以下样式：
.text-center {
text-align: center;
}
例：
<div class="container-fluid">
<div class="row text-center">
<div class="col-md-12">
Bootstrap 4 is coming....
</div>
</div>
</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
我对中心列的使用方法是display: inline-block用于列和text-align: center容器父级。
您只需将CSS类“居中”添加到中row。
<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>
.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/
Bootstrap 3现在为此提供了一个内置类.center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
如果您仍在使用2.X，则只需将其添加到CSS中即可。
现在，Bootstrap 3.1.1正在使用.center-block，并且该帮助程序类可用于列系统。
Bootstrap 3 帮助程序类中心。
请检查此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>
行列中心使用col-center-block辅助类。
.col-center-block {
float: none;
display: block;
margin: 0 auto;
/* margin-left: auto; margin-right: auto; */
}
只需将以下内容添加到您的自定义CSS文件即可。不建议直接编辑Bootstrap CSS文件，这会取消您使用CDN的能力。
.center-block {
float: none !important
}
为什么？
Bootstrap CSS（3.7版及更低版本）使用margin：0 auto; ，但会被size容器的float属性覆盖。
PS：
添加此类后，不要忘记按正确的顺序设置类。
<div class="col-md-6 center-block">Example</div>
的优选的方法为中心的列是使用“偏移”（即：col-md-offset-3）
对于居中元素，有一个center-block 帮助器类。
您还可以使用text-center到中心的文本（和内联元素）。
演示：http : //bootply.com/91632
编辑 -如注释中所述，center-block可处理列的内容和display:block元素，但不适用于列本身（col-*divs），因为Bootstrap使用float。
现在有了Bootstrap 4，居中方法已更改。
text-center仍用于display:inline元素mx-auto替换center-block为中心display:block元素offset-* 或 mx-auto可用于居中网格列mx-auto（自动x轴边距）将围绕display:block或display:flex具有一元件限定的宽度，（ ，，% 等。）。默认情况下，在网格列上使用Flexbox，因此还有多种flexbox居中方法。vwpx
有关BS4中的垂直居中的信息，请参见 https://stackoverflow.com/a/41464397/171456
有两种方法可以使<div>Bootstrap 3中的列居中：
第一种方法使用Bootstrap自己的偏移量类，因此它不需要更改标记，也不需要额外的CSS。关键是将偏移量设置为等于行剩余大小的一半。因此，例如，大小为2的列将通过添加偏移量5（即）居中(12-2)/2。
在标记中，它看起来像：
<div class="row">
<div class="col-md-2 col-md-offset-5"></div>
</div>
现在，此方法有一个明显的缺点。它仅适用于偶数列的尺寸，所以只.col-X-2，.col-X-4，col-X-6，col-X-8，和col-X-10支持。
margin:auto）您可以使用成熟的技术将任何列大小居中margin: 0 auto;。您只需要注意Bootstrap的网格系统添加的浮动即可。我建议定义一个自定义CSS类，如下所示：
.col-centered{
float: none;
margin: 0 auto;
}
现在，您可以将其添加到任何屏幕尺寸的任何列尺寸，并且它将与Bootstrap的响应式布局无缝协作：
<div class="row">
<div class="col-lg-1 col-centered"></div>
</div>
注意：使用这两种方法，您都可以跳过.row元素并将列居中放置在中.container，但是由于容器类中的填充，您会注意到实际列大小的最小差异。
更新：
由于v3.0.1 Bootstrap具有一个名为的内置类，该类center-block使用margin: 0 auto，但缺少float:none，因此可以将其添加到CSS中以使其与网格系统一起使用。
Bootstrap 4 solution: