首页 文章

垂直对齐基础div

提问于
浏览 次
3

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 .

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

这真的是你做的吗？

html css zurb-foundation vertical-alignment

1 回答

  • 0

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

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

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

    回复于

相关问题