堆叠

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）：

和working jsfiddle。