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

问题描述

我试图将一个动态包装器中的两个动态高度中心。我一直在玩各种各样的技巧，试图让这个工作的跨浏览器无效，有没有人有建议？见图解说明！紫色块是我想在动态包装器下方20像素的内容上的另一个块。

• 注意：对于红色框左侧的注释，


• 我也不知道红色或绿色框是否会更高 - 只是绿色

  使用 > display：inline-block + vertical-align：middle ，所以他们会像你想要的那样对齐。 p>
  
  

  查看此示例： 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屋！