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>

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

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

但 align-middle 类在基础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

垂直对齐基础5中的柱

1 个答案: