html - 垂直和右对齐未知高度的 div

Question

问题

我需要将 order_form div(浅灰色)垂直居中，并将其放在我们网站上每个产品框的最右侧。 div 的高度是不固定的，有时会填满其允许的大部分垂直空间(由于产品图片，该空间为 160 像素)。图片 div 垂直对齐完美。我用一个产品盒子制作了一个示例，并尽可能简化它，同时保留其 html 不变。

这是一个 jsfiddle displaying the problem (抱歉缺少图片!)

我知道有很多关于这个主题的帖子；我读过很多。我已经尝试了我能想到的一切，以及我在所有文章中找到的一切、已解决的问题，甚至是我在过去三个多小时内找到的每一条小线索。没有任何效果。

我完全不知道如何解决这个问题，我非常想将图片和 order_form div 更改为表格只是为了对齐._。

帮忙吗？

我尝试过的几件事:

• 显示:表格单元格； vertical-align:middle; 在 order_form div 上，并将 display:table 添加到其父级。
• 上面的 display:table 在一个添加的包装 div 上。
• 添加包装 div 并使用边距 + 负边距。
• 显示:表格单元格； vertical-align:middle; 并添加一个带有 left:160px; 的包装器 div；显示:表格。包装器 div 的宽度永远不正确，从而破坏了 order_form。
• vertical-align:middle 在 order_form 上并且 height 在其容器上等于 line-height
• 其他几种我不记得的方法
• 请说。

旁白

我需要在不使用任何 javascript 的情况下在较旧的浏览器(例如:IE8)上正常运行。

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

此外:下一步是将按钮从图像转换为漂亮的 css 链接，以便它们可以与文本一起很好地缩放(并在那里放弃表格)。不要因为我还没有接触过而扣分!

Answer 1

如果我正确地理解了这个问题，一种选择是将 div.order_form 设置为 display: table; height: 160px; 然后在其中创建一个 div(环绕其所有内容)并给该内部 div display: table-cell。这仍然需要使用绝对定位，这并不理想，但确实有效。