html - 将两个 div 在包装器内垂直居中(动态内容和包装器下方的内容)

标签 html css layout

我正在尝试将两个具有动态高度的 div 置于动态包装器的中心...我一直在尝试各种技巧来尝试让这个跨浏览器正常工作无济于事,有人有什么建议吗?看图解释!紫色 block 是另一个内容 block ,我想放在动态包装器下方 20 像素处。

Question explanation

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

最佳答案

在 block 上使用 display: inline-block + vertical-align: middle,这样它们就会按照您希望的方式对齐。

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

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

关于html - 将两个 div 在包装器内垂直居中(动态内容和包装器下方的内容),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7301334/

相关文章:

css - 尝试在同一页面上使用 CSS Multiple Checkbox Hack

javascript - 自 Firefox 49 以来,MJPEG 流在第一帧卡住

html - 在 CSS 中更改悬停 div 的背景

android - 如何使RealtiveLayout中的ToggleButton和ImageButton高度相同?

php - MySQL数据库实时更新网页

javascript - 如何在使用 JavaScript 单击按钮时更改文件名并下载它

php - 用表单搜索my​​sqli表并显示结果

javascript - 像素化跨浏览器图像缩放

javascript - ExtJS 和 Internet Explorer : Layout corruption with scrollbars

android - 如何将 ListView 列与标题匹配?