CODEWITHSUNDEEP
htmlcsszurb-foundationzurb-foundation-6zurb-foundation-5
wudpecker
wudpecker

Reputation: 406

Vertical align a column in foundation 5

in the following foundation 5 snippet, second column is aligned to the top.

    <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

I need something like this https://codepen.io/ZURBFoundation/pen/BRrYQy?editors=1000 where column is aligned to middle.

But align-middle class is not working in foundation 5. Is there any simple way to implement in foundation 5.

Upvotes: 0

Views: 958

Answers (1)

Christopher
Christopher

Reputation: 94

You could add the following Class to your Styles:

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

And then you can assign the Class to the parent Container e.g .row. Heres your Demo: https://codepen.io/anon/pen/VyyYaQ?editors=1100

Upvotes: 1

Related Questions