its*_*sme 244
更新:虽然这个答案在2013年初可能是正确的,但它不应再被使用了.适当的解决方案使用抵消.
至于其他用户的建议,还有一些本机引导类可用,如:
class="text-center"
class="pagination-centered"
感谢@Henning和@trejder
小智 76
将元素设置为
display: block中心并通过中心margin.可作为mixin和class使用.
<div class="center-block">...</div>
css*_*hus 54
对于此问题的未来访问者:
如果您尝试将图像居中在div中但图像不会居中,则可以描述您的问题:
<div class="col-sm-4 text-center">
<img class="img-responsive text-center" src="myPic.jpg" />
</div>
的img-responsive类添加display:block到图像标签,其停止指令text-align:center(text-center从工作类).
解:
<div class="col-sm-4">
<img class="img-responsive center-block" src="myPic.jpg" />
</div>
添加center-block类会覆盖display:block使用img-responsive该类放入的指令.
没有这个img-responsive类,图像就会通过添加text-center类来居中
此外,您应该了解flexbox的基础知识以及如何使用它,因为Bootstrap4现在原生使用它.
这是Brad Schiff的一个优秀,快节奏的视频教程
这是一本很棒的备忘单
Zim*_*Zim 30
2018年更新
在Bootstrap 4中,定心方法发生了变化..
BS4的水平中心
text-center仍然用于display:inline元素mx-auto取代center-block中心display:flex儿童offset-* 或者 mx-auto可以用于居中网格列mx-auto(自动x轴边距)将围绕display:block或display:flex具有一元件限定的宽度,( ,,% 等.).默认情况下,Flexbox在网格列上使用,因此还有各种flexbox居中方法.vwpx
有关BS4中的垂直居中,请参阅 /sf/answers/2902507821/
小智 29
您可以直接写入您的css文件,如下所示:
.content {
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}<div class = "content" >
<p> some text </p>
</div>小智 9
我用这个
<style>
html, body {
height: 100%;
margin: 0;
padding: 0 0;
}
.container-fluid {
height: 100%;
display: table;
width: 100%;
padding-right: 0;
padding-left: 0;
}
.row-fluid {
height: 100%;
display: table-cell;
vertical-align: middle;
width: 100%;
}
.centering {
float: none;
margin: 0 auto;
}
</style>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="offset3 span6 centering">
content here
</div>
</div>
</div>
</body>
对于水平居中,你可以有这样的东西:
.centering{
float:none;
margin:0 auto
}
<div class="span8 centering"></div>
我喜欢这个类似问题的解决方案./sf/answers/1752541241/text-center在实际的表数据<td>和表头<th>元素上使用bootstraps 类.所以
<td class="text-center">Cell data</td>
和
<th class="text-center">Header cell data</th>
使用 bootstrap 4，您可以使用 flex
<div class="d-flex justify-content-center align-items-center">
<button type="submit" class="btn btn-primary">Create</button>
</div>
来源：引导程序 4.1