如何在Twitter Bootstrap 3中将容器中的一个列大小的 div(12 列)居中?
.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
在容器中居中。如果有多个div
,我可以使用一行,但是现在我只想要一个在容器中居中的一列大小的div
(12 列)。
我也不确定上述方法是否足够好,因为意图不是将div
抵消一半。我不需要外界自由空间div
和内容div
按比例缩小。我想在 div 外面清空空间以均匀分布 (收缩直到容器宽度等于一列)。
在 Bootstrap 3 中以列<div>
为中心有两种方法:
第一种方法使用 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;
将任何列大小居中 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 引导程序有一个名为center-block
的内置类,它使用margin: 0 auto
,但缺少float:none
,你可以将它添加到 CSS 中,使其与网格系统一起使用。
使列居中的首选方法是使用 “偏移”(即: col-md-offset-3
)
对于居中元素 ,有一个center-block
辅助类 。
您还可以使用text-center
来居中文本 (和内联元素)。
演示 : http : //bootply.com/91632
编辑 - 正如评论中所提到的, center-block
适用于列内容和display:block
元素,但不会对列本身( col-*
div)起作用,因为 Bootstrap 使用float
。
现在使用Bootstrap 4 , 中心方法已经改变了..
text-center
仍用于display:inline
元素mx-auto
将center-block
替换为中心display:block
元素offset-*
或 mx-auto
可用于居中网格列 mx-auto
(自动 x 轴边距)将居中display:block
或display:flex
具有已定义宽度的 display:flex
元素( %
, vw
, px
等)。 默认情况下 , Flexbox在网格列上使用,因此还有各种 flexbox 居中方法。
有关 BS4 中的垂直居中,请参阅 https://stackoverflow.com/a/41464397/171456
现在 Bootstrap 3.1.1 正在使用.center-block
,这个帮助程序类可以与列系统一起使用。
Bootstrap 3 Helper Class Center 。
请检查这个 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; */
}