html - 在 Zurb Foundation 中填充垂直对齐

Question

当我使用类垂直对齐时，右边的div 没有左边的那么高。我只想在右边的 div 中填充黑色背景。

见下图-

我的代码-

    <div class="row expanded align-middle">
        <div class="small-12 medium-6 bg-verde" style="padding: 100px">
            <h4 class="">
                Morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                Nulla nec libero sit amet nulla efficitur bibendum vitae et purus.
                Morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                Nulla nec libero sit amet nulla efficitur bibendum vitae et purus.
            </h4>
        </div>
        <div class="small-12 medium-6 bg-black"  style="padding: 100px">
            <h4 class="color-white">
                Morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                Nulla nec libero sit amet nulla efficitur bibendum vitae et purus.
            </h4>
        </div>
    </div>

Answer 1

发生这种情况是由于每个 h4 中的实际行数。您可以使用两种技术纠正此问题，使用纯 flex 或使用 jquery 库。由于 flex 的不兼容性，我个人更喜欢 jquery 库。

这是一个有用的网站，可以帮助您以任何方式居中: http://howtocenterincss.com/

这是我使用的 jQuery 库: http://brm.io/jquery-match-height-demo/