html - 垂直对齐基础 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其中列与中间对齐。

但是 align-middle 类在 foundation 5 中不起作用。在 foundation 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