我如何在Twitter Bootstrap 3的容器(12列)中心一个列大小的div ?
.centered {
背景颜色:红色;
｝
<！——最新编译和最小化的CSS——>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="匿名">
<身体类= "容器" >
<div class=" font - family -宋体">
<img data-src="holder.js/100x100" alt="" /> .
< / div >
身体< / >
我想要一个div，类。居中在容器中。如果有多个div，我可能会使用一行，但现在我只想要一个div的大小为一列居中容器(12列)。
我也不确定上面的方法是否足够好，因为目的不是将div抵消一半。我不需要在div之外的自由空间和div的内容按比例缩小。我想清空div之外的空间，以均匀分布(收缩直到容器宽度等于一列)。
只需将显示内容的列设置为col-xs-12 (mobile-first;-)，并仅配置容器来控制您希望居中内容的宽度，因此:
.container {
背景颜色:蓝色;
｝
.centered {
背景颜色:红色;
｝
<body class="container col-xs-offset-3 col-xs-6">
<div class=" font - family -宋体">
<img data-src="holder.js/100x100" alt="" /> .
< / div >
身体< / >
<body class="container col-xs-offset-1 col-xs-10">
<div class=" font - family -宋体">
<img data-src="holder.js/100x100" alt="" /> .
< / div >
身体< / >
有关演示，请参见http://codepen.io/Kebten/pen/gpRNMe:-)
你可以使用文本中心的行，并可以确保内部divs有display:inline-block(与不浮动)。
As:
<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
}
小提琴:
http://jsfiddle.net/DTcHh/3177/
居中列的首选方法是使用“偏移量”(即:col-md-offset-3)
引导3。X定心示例
对于居中元素，有一个居中块助手类。
您还可以使用文本中心到文本中心(以及内联元素)。
响应式演示:http://bootply.com/91632
编辑-正如评论中提到的，center-block适用于列内容和display:block元素，但不适用于列本身(col-* divs)，因为Bootstrap使用float。
更新2020
现在与Bootstrap 4，定心方法已经改变..
文本中心仍然用于显示:内联元素
Mx-auto将center-block替换为center display:block元素
Offset -*或mx-auto可用于网格列居中
Mx-auto (auto x轴边距)将中心显示:块或显示:具有定义宽度的flex元素(%，vw, px等)。默认情况下，在网格列上使用Flexbox，因此也有各种Flexbox居中方法。
示范引导4水平定心
有关BS4的垂直定心，请参阅https://stackoverflow.com/a/41464397/171456
对于那些当你没有确切的数字来填充你的网格时，希望在屏幕上将列元素居中的人，我写了一小段JavaScript来返回类名:
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个元素，你可以这样做:
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整除。
