0

问题

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

这是一个显示问题的jsfiddle（抱歉没有图片！）

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

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

帮助？

我尝试过的几件事：

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

旁白

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

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

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

4

2 回答 2

0

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

于 2013-05-31T02:04:16.047 回答
0

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

想使用一些 jquery 脚本吗？

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

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

查询

$(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' );
});
于 2013-05-31T04:32:27.460 回答