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>

使用基础小12，中6样式表示法如何在响应div中垂直对齐内容。在上面的代码片段中，我希望右边的内容与中间对齐，以对应权利中心的圆形div。

我知道这是一个很受欢迎的问题，但所有回复都要求我定义一个宽度，或者具体说明div在页面上的位置使用＆＃39; top＆＃39;并且＆＃39;离开＆＃39;标签

这真的是你这样做的吗？

Answer 1

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

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

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

垂直对齐基础div

1 个答案: