Содержимое бутстрапа не центрируется вертикально при укладке

Question

Я использую vertical-align: middle, чтобы разместить мой контент, как показано ниже.

Это прекрасно работает, когда обе половины находятся рядом друг с другом, но когда мои столбцы сложены в виде сотового телефона, контент больше не центрируется по центру. Похоже, что это сложено.

Я хочу, чтобы содержание в центре остался вертикально ли вы просматриваете его на компьютере или мобильном телефоне. По какой-то причине vertical-align: middle не работает, когда мои столбцы стекают. Есть ли что-нибудь, что я могу добавить в свой css, чтобы исправить это?

HTML:

<!-- 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> 
      <a class="btn btn-primary" href="#" role="button"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Learn More</a> 
     </div> 

    </div> <!-- end row --> 
</div> <!-- end container-fluid --> 
</div> <!-- end families --> 

CSS:

.center-row { 
    display: table; 
    } 

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

    .fam-col-left { 
    background: url('../img/spark.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 { 
    font-size: 16px; 
    width: 50%; 
    margin: 0 auto; 
    } 

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

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

    @media (max-width:768px) { 
    .center-row { 
    display: block; 
    } 
    .fam-col-right, .fam-col-left { 
    width:100%;  
    display:inline-block; 
    } 
    } 

Answer 1

Попытка вертикально центрировать блок элемент, используя vertical-align: middle не является полностью эффективным, так как это не предназначено для работы vertical-align. Он предназначен для использования на встроенных элементах, таких как <span>. Для элемента уровня (например, <div> или <p>) имеются лучшие инструменты выравнивания.

Вот некоторые урезанная код, показывающий одну простую технику, которая будет вертикально выравнивать блок элемент внутри другого элемента блока:

CSS:

.valign-wrapper { 
    position: relative; 
    text-align: center; 
    height: 550px; 
} 

.valign-middle { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
} 

HTML:

<div class="valign-wrapper"> 

    <img src="http://lorempixel.com/image_output/city-q-g-764-550-6.jpg"> 

    <div class="valign-middle"> 

    <h2>Families &amp; 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> 
    <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> 
    <a class="btn btn-primary" href="#" role="button"> 
     <i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Learn More</a> 

    </div> <!-- /valign-middle --> 
</div> <!-- /valign-wrapper --> 

Результаты (красная рамка показывает valign-middle div):

И a working jsfiddle.