在包装器内垂直居中两个 div(包装器下方具有动态内容和内容) [英] Vertically center two divs inside a wrapper (with dynamic content and content below the wrapper)

问题描述

我正在尝试将两个具有动态高度的 div 居中放置在动态包装器中...我一直在玩各种技巧来尝试使这个跨浏览器工作无济于事，有人有建议吗?看图解释！紫色块是我想要位于动态包装器下方 20 像素的内容的另一个块.

• 注意:对于红色框左侧的注释，我的意思是说它应该缩放到与包含的 div(绿色或红色)更高的那个一样高.
• 我也不知道红色框还是绿色框会更高 - 只是绿色框的高度是动态的，而红色框的高度是固定的.

解决方案

在块上使用 display: inline-block + vertical-align: middle ，所以他们会像您希望的那样对齐.

看看这个例子:http://jsfiddle.net/kizu/Tky8T/>

更重要的是:红色 div 的高度也可以是动态的！

I'm trying to center two divs with dynamic heights inside a dynamic wrapper... I've been playing with all sorts of tricks to try and get this working cross-browser to no avail, does anyone have a suggestion? See graphic for explanation! The purple block is another block on content I want to sit 20px below the dynamic wrapper.

• NOTE: For the note to the left of the red box, I meant to say "It should scale to be as tall as whichever contained div (green or red) is taller.
• I also do not know whether the red or green box will be taller - just that the green box's height is dynamic and the red's height is fixed.

解决方案

Use display: inline-block + vertical-align: middle on the blocks, so they would be aligned just like you want them to.

Look at this example: http://jsfiddle.net/kizu/Tky8T/

Even more: the height of the red div can be dynamic too!

这篇关于在包装器内垂直居中两个 div(包装器下方具有动态内容和内容)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！