垂直对齐基础 5 中的列答案

【问题标题】：Vertical align a column in foundation 5垂直对齐基础 5 中的列
【发布时间】：2018-01-07 15:28:50
【问题描述】：

在下面的基础 5 sn-p 中，第二列与顶部对齐。

    <div class="row">
       <div class="small-6 columns">I am as well, but I have so much text I take up more space! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facere ducimus earum minus, inventore, ratione doloremque deserunt neque perspiciatis accusamus explicabo soluta, quod provident distinctio aliquam omnis? Labore, ullam possimus.</div>
       <div class="small-6 columns">center me</div>
    </div>

codepen：https://codepen.io/anon/pen/goXyLZ?editors=1000

我需要像 https://codepen.io/ZURBFoundation/pen/BRrYQy?editors=1000 这样的东西，其中列与中间对齐。

但是 align-middle 类在基础 5 中不起作用。有什么简单的方法可以在基础 5 中实现。

【问题讨论】：

标签： html css zurb-foundation zurb-foundation-6 zurb-foundation-5

【解决方案1】：

您可以将以下类添加到您的样式中：

.align-middle {
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-align:center;
   -ms-flex-align:center;
   align-items:center;
 }

然后您可以将 Class 分配给父 Container，例如 .row。这是您的演示：https://codepen.io/anon/pen/VyyYaQ?editors=1100

【讨论】：