在我的類.fam-col-right
和.fam-col-left
我在我的CSS中使用display: table-cell; vertical-align: middle; float: none;
垂直居中我的內容,如下所示。 .row
設置爲display: table;
。Bootstrap列不堆積
我遇到的問題是我的專欄是不是在所有疊加,我不知道爲什麼。這是它看起來的樣子,而不是堆疊。
我怎麼能有我的內容棧和保持垂直對齊的中間?
這裏是我的代碼:
<!-- Families -->
<div id="families">
<div class="container-fluid">
<div class="row text-center center-row">
<div class="col-md-6 col-md-push-6 fam-col-left">
<h2>Families & Individuals</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus earum dolorum sapiente quod, voluptas optio, ducimus nemo rerum commodi porro laudantium nam. Veritatis ex enim culpa voluptatem, corporis? Distinctio, obcaecati.</p>
</div>
<div class="col-md-6 col-md-pull-6 fam-col-right">
<ul class="list-unstyled">
<li><i class="fa fa-map-o fa-fw fa-1x"></i><a href="#"> Wealth Management</a></li>
<li><i class="fa fa-pie-chart fa-fw fa-1x"></i><a href="#"> Asset Allocation</a></li>
<li><i class="fa fa-anchor fa-fw fa-1x"></i><a href="#"> Insurance Risk Assessments</a></li>
<li><i class="fa fa-graduation-cap fa-fw fa-1x"></i><a href="#"> Education Funds Planning</a></li>
<li><i class="fa fa-calendar-check-o fa-fw fa-1x"></i><a href="#"> Retirement Planning</a></li>
<li><i class="fa fa-area-chart fa-fw fa-1x"></i><a href="#"> Investments</a></li>
</ul>
</div>
</div> <!-- end row -->
</div> <!-- end container-fluid -->
</div> <!-- end families -->
.center-row {
display: table;
}
#families {
margin-bottom: -30px;
}
.fam-col-left {
background: url('../img/space.jpg');
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height: 550px;
color: #FCFFF5; /*white*/
display: table-cell;
vertical-align: middle;
float: none;
}
.fam-col-left p {
width: 50%;
margin: 0 auto;
}
.fam-col-right {
display: table-cell;
vertical-align: middle;
float: none;
}
.fam-col-right li {
padding-bottom: 20px;
}
你正在'浮動:無;'爲columns.so他們不會如預期 –