JQUERY

Question

问题

我需要垂直居中order_form div（浅灰色）并将其保存在我们网站上每个产品盒的最右侧。 div的高度是非固定的，偶尔可以填充其允许的大部分垂直空间（由于产品图像，它是160px）。图片div垂直对齐完美。我用一个产品盒做了一个例子，并尽可能简化它，同时保持html完整。

这是jsfiddle displaying the problem（抱歉缺少图像！）

我意识到这个话题有很多帖子;我读了很多。我已经尝试了所有我能想到的东西，以及我在所有文章中找到的所有内容，解决了问题，甚至我在过去三个小时内发现的每一条线索。没有任何效果。

我完全迷失了如何解决这个问题，我非常想把图片和order_form div更改为一个表，只是为了对齐._。

帮助？

我尝试了几件事：

display: table-cell; vertical-align:middle;，并将display:table添加到其父级。
上面用display:table添加了一个包装div。
添加包装div并使用保证金+负边距。
display:table-cell; vertical-align:middle;并添加包含left:160px; display:table的div。包装div的宽度永远不正确，打破了order_form。
vertical-align:middle并且其容器上的height等于line-height
其他几种我不记得的方法
请说。

旁白

我需要在较旧的浏览器（例如：IE8）上使用它，而不使用任何JavaScript。

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

另外：下一步是将按钮从图像转换为漂亮的css链接，这样它们就可以与文本一起很好地缩放（并且也可以在那里丢弃表格）。不要把我的积分停靠在我尚未触及的地方！

Answer 1

如果我理解正确的问题，一个选项是将div.order_form设置为display: table; height: 160px;，然后在其中创建一个div（包裹其所有内容）并给出内部div {{1} }。这仍然需要使用绝对定位，这不是理想的，但确实有效。

Answer 2

如果您也想在旧浏览器上使用它..

想使用一些jquery脚本吗？

根据您的order_form高度自动调整高度。

请参阅jsfiddle上的DEMO http://jsfiddle.net/kdNnw/

JQUERY

$(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' );
});

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

问题

我尝试了几件事：

旁白

2 个答案:

JQUERY