猿问
下载APP

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

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

  •  



摇曳的蔷薇
浏览 134回答 2
2回答

哔哔one

不能居中的罪魁祸首是&nbsp;col-sm-*&nbsp;的&nbsp;float: left&nbsp;样式,因为对于&nbsp;col-sm-*&nbsp;而言,只要屏幕宽度不小于&nbsp;@screen-sm-min&nbsp;就不会折行,所以可以考虑不使用&nbsp;float: left&nbsp;而是用&nbsp;display: table-cell&nbsp;来实现对齐,这样就能比较好的解决居中问题了。不过问题是不支持这种&nbsp;display&nbsp;的浏览器就会出问题,你可以考虑用 CSS hack 来 fallback,舍弃居中对齐来保持栅格系统正常工作。HTML:<div class="row text-center vertical-middle-sm"> &nbsp;<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) { &nbsp;.vertical-middle-sm { &nbsp; &nbsp;display: table;> div { &nbsp; &nbsp; &nbsp;display: table-cell; &nbsp; &nbsp; &nbsp;height: 100%; &nbsp; &nbsp; &nbsp;min-height: 100%; &nbsp; &nbsp; &nbsp;float: none !important;}}}拓展资料Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,是一个CSS/HTML框架。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。&nbsp;

慕盖茨1488219

垂直居中只能使用这个代码.center-vertical {position:relative;top:50%;transform:translateY(-50%);}
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答