css - Bootstrap 内容在堆叠时不垂直居中

Question

我正在使用 vertical-align: middle 将我的内容居中，如下所示。

当两半并排时效果很好，但是当我的列在移动 View 中堆叠时，内容不再居中。堆叠时看起来像这样。

无论您是在台式机还是移动设备上查看内容，我都希望内容保持垂直居中。无论出于何种原因，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 将 block 元素垂直居中不是完全有效，因为这不是 vertical-align 的预期工作.它旨在用于 内联 元素，例如 <span> .对于 block 级 元素(如 <div> 或 <p> )，有更好的对齐工具。

下面是一些精简代码，展示了一种将 block 元素垂直对齐到另一个 block 元素内的简单技术:

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 .