是否有任何方法在主父元素中垂直或水平地居中html元素?
当前回答
在Bootstrap 4中,定心方法已经改变。
水平中心在引导4
文本中心仍然用于显示:内联元素 Mx-auto将中心块替换为中心显示:flex子 Offset -*或mx-auto可用于网格列居中
Mx-auto (auto x轴边距)将中心显示:块或显示:具有定义宽度的flex元素(%,vw, px等)。默认情况下,在网格列上使用Flexbox,因此也有各种Flexbox居中方法。
示范引导4水平定心
有关BS4的垂直定心,请参阅https://stackoverflow.com/a/41464397
其他回答
我发现在Bootstrap 4中你可以这样做:
中心水平确实是文本中心类
中心垂直,但是使用bootstrap类添加mb-auto mt-auto,使margin-top和margin- bottom设置为auto。
更新:虽然这个答案在2013年初可能是正确的,但现在不应该再用了。正确的解决方案使用偏移量,如下所示:
class="mx-auto"
至于其他用户的建议,也有本地引导类可用,如:
class="text-center"
class="pagination-centered"
对于水平居中,你可以这样做:
.centering{
float:none;
margin:0 auto
}
<div class="span8 centering"></div>
如果你试图在div中居中一个图像,但图像不会居中,这可能描述了你的问题:
JSFiddle演示的问题
<div class="col-sm-4 text-center">
<img class="img-responsive text-center" src="myPic.jpg" />
</div>
img-responsive类向图像标记添加了一个display:block指令,它将停止text-align:center(文本中心类)的工作。
解决方案:
<div class="col-sm-4">
<img class="img-responsive center-block" src="myPic.jpg" />
</div>
解决方案的JSFiddle演示
添加center-block类将覆盖使用img-responsive类放入的display:block指令。如果没有img-responsive类,图像将仅通过添加文本中心类居中
此外,您应该了解flexbox的基础知识以及如何使用它,因为Bootstrap 4现在本机使用它。
这是布拉德·希夫制作的一个优秀的、快节奏的视频教程
这里有一个很棒的小抄
Bootstrap文档:
设置要显示的元素:块和居中通过边距。可作为mixin和类使用。
<div class="center-block">...</div>
推荐文章
- CSS:控制项目符号和<li>之间的空格
- 调试打印样式表的建议?
- 如何以编程方式触发引导模式?
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 是否有'box-shadow-color'属性?
- 在jQuery中的CSS类更改上触发事件
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 如何使用Twitter的Bootstrap内联显示列表
- 相对定位一个元素,而不占用文档流中的空间
- 禁用身体滚动
- 使用jQuery动画addClass/removeClass
- 在一个CSS宽度的小数点后的位置是尊重?
- 检测输入是否有文本在它使用CSS -在一个页面上,我正在访问和不控制?