为了账号安全,请及时绑定邮箱和手机立即绑定

bootstrap栅格系统中如何实现垂直居中

/ 猿问

bootstrap栅格系统中如何实现垂直居中

摇曳的蔷薇 2019-06-29 19:19:05

代码如下
请问如何实现红色块与黑色块的垂直居中

  •  



查看完整描述

2 回答

?
哔哔one

不能居中的罪魁祸首是 col-sm-* 的 float: left 样式,因为对于 col-sm-* 而言,只要屏幕宽度不小于 @screen-sm-min 就不会折行,所以可以考虑不使用 float: left 而是用 display: table-cell 来实现对齐,这样就能比较好的解决居中问题了。不过问题是不支持这种 display 的浏览器就会出问题,你可以考虑用 CSS hack 来 fallback,舍弃居中对齐来保持栅格系统正常工作。

HTML:

<div class="row text-center vertical-middle-sm">  <div class="col-sm-4"><img src="photo.jpg" alt="..." class="img-circle"></div><div class="col-sm-8 text-left"><p>测试文字</p></div></div>

LESS:


@media (min-width: @screen-sm-min) {  .vertical-middle-sm {    display: table;> div {      display: table-cell;      height: 100%;      min-height: 100%;      float: none !important;}}}

拓展资料

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,是一个CSS/HTML框架。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。


 





查看完整回答
反对 回复 2019-06-30

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信