垂直对齐地基 div

Question

<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' 和 [=22= 明确说明 div 在页面上的位置] 标签。

你真的是这样做的吗？

Answer 1

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

诀窍是使用 FlexBox。没有它，你将需要硬编码一些值，正如其他人所建议的那样（边距、填充、高度或宽度——这是不可避免的），但 FlexBox 最终允许你在垂直对齐内容响应灵活的宽度 div.

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

垂直对齐地基 div

vertically align foundation div

html

css

vertical-alignment

zurb-foundation