Html 垂直和右对齐未知高度div 问题

我需要垂直居中的订单形式div（浅灰色），并保持在我们的网站上每个产品框的右侧。div的高度是不固定的，偶尔可以填充其允许的大部分垂直空间（由于产品图像，该空间为160px）。图片垂直对齐。我用一个产品框做了一个例子，并尽可能简化了它，同时保留了它的html完好无损

这里有一个（很抱歉没有图片！）

我意识到有很多关于这个话题的帖子；我读过很多书。在过去的三个多小时里，我已经尝试了我能想到的一切，我在所有文章中找到的一切，解决的问题，甚至我发现的每一个小线索。什么都没起作用

我完全不知道如何解决这个问题，我很想把图片和订单div改成表格，只是为了对齐

帮忙

我试过几件事：

• 显示：表格单元格；垂直对齐：中间对齐，并将
  display:table
  添加到其父级

• 在添加的包装器div上显示：table
• 添加包装div并使用边距+负边距

• 显示：表格单元格；垂直对齐：中间对齐

  并添加一个包装器div，左侧为

  160px；显示：表格

  。包装器div的宽度永远不正确，破坏了订单表单

• 垂直对齐：订单上的中间

  ，容器上的高度等于行高度
• 我不记得还有其他几种方法
• 请说

旁白 我需要在稍旧的浏览器（例如：IE8）上实现这一功能，而不使用任何javascript

背景信息：我最近开始在我们的网站上工作，除其他外，我已经将所有产品框从表转换为div，并稍微清理了css。问题是这些表格，作为表格，对对齐的处理非常好

---

另外：下一步是将按钮从图像转换成漂亮的css链接，这样它们就可以很好地与文本一起缩放（也可以将表格丢弃在那里）。不要因为我还没碰过的东西而扣分

如果我正确理解了这个问题，一个选项是将

div.order\u form

设置为

display:table；高度：160px

然后在其内部创建一个div（环绕其所有内容），并给该内部div

display:table cell

。这仍然需要使用绝对定位，虽然这并不理想，但它确实有效。

如果你想在旧浏览器上也这样做的话

想使用jquery脚本吗

高度将根据您的订单高度自动调整

请参阅JSFIDLE上的演示

JQUERY

---

我在jsfiddle上尝试了这一点（注意到我没有合并两个订单表单sass块..）。它正确对齐，除了。。content div的高度将更改以适应容器的160px高度。有点方向正确，但仍然不太管用：（完成。我已经通过添加div.order\u form\u内容和移动适当的样式包含了您的建议。正如您所看到的，它的高度越来越高。有什么线索可以解决这个问题吗？链接：（我还合并了两个样式块，尽管这在很大程度上是不相关的。）解决方案是添加第三个div作为显示的内容：table cell div。感谢您引导我找到解决方案！我想我应该指定：我的老板在我们的网站上绝对不想要javascript，只想要纯html和css。我可以用一点jquery做的事情！很遗憾。在一些令人沮丧的编辑和添加额外的wr之后阿佩尔斯，我终于成功了！好吧……对于其他与同一问题斗争的人，我的解决方案如下：

$(document).ready(function() {
    // get dynamic height of order_form and calsulate margin-top css
    var ver_top = ( 160 - $('.order_form').height()) / 2;
    $('.order_form').css( "margin-top", ver_top+'px' );
});