bootstrap栅格系统中如何实现垂直居中
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了bootstrap栅格系统中如何实现垂直居中相关的知识,希望对你有一定的参考价值。
参考技术A不能居中的罪魁祸首是 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都使用了该项目。
在bootstrap栅格系统中,如何将图片垂直居中
<div class="panel panel-primary col-md-6">
<div class="panel-heading">最新活动</div>
<div class="panel-body">
<div class="row" >
<div class="col-md-6" style="">
<img class="img-thumbnail" src= "img/1.jpg" alt="Alternate Text" /> <!--将这张图片垂直居中-->
</div>
<div class="col-md-6">
<ul>
<li><h1>asdfasdfadf</h1></li>
<li>asdfasdfadf</li>
<li>asdfasdfadf</li>
<li>asdfasdfadf</li>
<li>asdfasdfadf</li>
<li>asdfasdfadf</li>
<li>asdfasdfadf</li>
<li>asdfasdfadf</li>
</ul>
</div>
</div>
</div>
</div>
.center-vertical
position:relative;
top:50%;
transform:translateY(-50%);
以上是关于bootstrap栅格系统中如何实现垂直居中的主要内容,如果未能解决你的问题,请参考以下文章