在基础 5 中垂直对齐列

Question

在下面的基础 5 代码段中，第二列与顶部对齐。

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

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

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

但是，中产阶级在基础5中不起作用。有没有简单的方法可以在基础 5 中实现。

Answer 1

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

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

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