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