html - 垂直对齐基础 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>

使用 foundations small-12，medium-6 样式符号，您如何在响应式 div 中垂直对齐内容。在上面的代码片段中，我希望右侧的内容居中对齐，以对应右侧中心的圆形 div。

我知道这是一个很受欢迎的问题，但所有回复都要求我定义宽度，或者使用“top”和“left”标签明确说明 div 在页面上的位置。

你真的是这样做的吗？

Answer 1

查看此 JSFiddle 以解决您的问题:http://jsfiddle.net/61hov4rp/65/ . (在最新版本的 Chrome、Safari、Opera、Firefox、Tor 中测试)。

诀窍是使用 FlexBox。没有它，您将需要像其他人建议的那样对某些值进行硬编码(边距、填充、高度或宽度——这是不可避免的)，但 FlexBox 最终允许您在响应灵活的情况下垂直对齐内容-width div.

在未来的元素中，您可以使用支持 FlexBox 的 Foundation 6。查看他们的 Flex Grid documentation .