Bootstrap列不堆积

Question

在我的类.fam-col-right和.fam-col-left我在我的CSS中使用display: table-cell; vertical-align: middle; float: none;垂直居中我的内容，如下所示。 .row设置为display: table;。

我遇到的问题是我的专栏是不是在所有叠加，我不知道为什么。这是它看起来的样子，而不是堆叠。

我怎么能有我的内容栈和保持垂直对齐的中间？

这里是我的代码：

<!-- 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; 
} 

Answer 1

寻找这样的事情？ - https://jsfiddle.net/9s1e9tm0/

.center-row { 
display: table; 
} 

#families { 
margin-bottom: -30px; 
} 

.fam-col-left { 
background: url('http://www.unoosa.org/res/timeline/index_html/space-2.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; 
width:50%; 
} 

.fam-col-left p { 
width: 50%; 
margin: 0 auto; 
} 

.fam-col-right { 
display: table-cell; 
vertical-align: middle; 
float: none; 
width:50%; 
} 

.fam-col-right li { 
padding-bottom: 20px; 
}