0

希望有人能指出我正确的方向。

我一直在尝试将图像垂直居中放在一个 div 中，如果图像的高度一致，我可以使用 CSS 来做到这一点。然而（和往常一样）事情并不那么简单，而且几乎每个实例的图像高度都不同。

我希望能够为图像添加一半图像高度的负边距，以将其拉入 div 的中心。

关于我如何做到这一点的任何建议？

这似乎不起作用：S

var $img = $('div#imageColumn img');
var h = $img.height();
$img.css('margin-top', + h / -2 + "px");

提前致谢。

4

2 回答 2

0

这段代码是前段时间在 SO 上找到的。你像这样使用它

$(".yourclass").vAlign();

它计算父元素的高度并相应地居中。

功能：

(function ($) {
    // VERTICALLY ALIGN FUNCTION
    $.fn.vAlign = function () {
        return this.each(function (i) {
            var ah = $(this).height();
            var ph = $(this).parent().height();
            var mh = Math.ceil((ph - ah) / 2);
            if (mh > 0) {
                $(this).css('margin-top', mh);
            } else {
                $(this).css('margin-top', 0);
            }
        });
    };
})(jQuery);
于 2012-07-17T17:12:57.433 回答
0

哟不需要jQuery，CSS可以做到。只需将您的图像设置为：

.yourDiv .yourImg{
  display: inline-block;
  vertical-align: middle;
  /* if you wonder for a maximum height just add */
  max-height: 200px;   
}

此外，如果您想知道在 IE7 上支持 inline-block 的技巧，您有： http ://www.kollerat.com/cms/index.php/Web-admin/HTML/IE7-and-inline-block.html

于 2012-07-17T17:33:08.423 回答