vertically align foundation div

Question

http://jsfiddle.net/mgLtz5kg/

<div class="row expanded">
     <div class="row expanded paddedrow">
           <div class="small-12 medium-4 columns paddedcirclediv">
            <div class="small-12 columns circlediv"></div>
        </div>
        <div class="small-8 columns factoid childbox">
            <h3>lorem</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti iusto, voluptatibus minus assumenda harum ipsum. Beatae in at quam accusantium enim asperiores, hic nulla eum, nihil quae omnis error, labore.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti iusto, voluptatibus minus assumenda harum ipsum. Beatae in at quam accusantium enim asperiores, hic nulla eum, nihil quae omnis error, labore.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti iusto, voluptatibus minus assumenda harum ipsum. Beatae in at quam accusantium enim asperiores, hic nulla eum, nihil quae omnis error, labore.</p>
        </div>
     </div>

     <div class="row expanded">
        <div class="small-12 medium-4 columns paddedcirclediv">
            <div class="small-12 columns circlediv"></div>
        </div>
        <div class="small-8 columns factoid">
            <h3>ipsum</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti iusto, voluptatibus minus assumenda harum ipsum. Beatae in at quam accusantium enim asperiores, hic nulla eum, nihil quae omnis error, labore.</p>
        </div>
    </div>
</div>

Using foundations small-12, medium-6 style notation how do you approach vertically aligning content in a responsive div. In the codesnippet above I want the content on the right to be middle aligned to correspond to the circular div on the rights centre.

I know this is a popular question but all the responses require me to either define a width, or specifically state where on the page the div is located using 'top' and 'left' tags.

Is that really the way you do it?

Answer 1

Check out this JSFiddle for a solution to your problem: http://jsfiddle.net/61hov4rp/65/. (Tested in latest versions of Chrome, Safari, Opera, Firefox, Tor).

The trick is to use FlexBox. Without it, you will need to hard-code some values, as others have suggested (margins, paddings, heights or widths - it's unavoidable), but FlexBox finally allows you to align content vertically in a responsive flexible-width div.

In future projects you could use Foundation 6, which supports FlexBox. Check out their Flex Grid documentation.