使用jQuery在一个div中垂直居中图像

我一直在试图在一个div内垂直居中放置一个图像，如果图像的高度一致，我可以使用CSS。然而（一如既往）事情并不那么简单，几乎每个实例的图像高度都不相同。

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

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

这似乎并不奏效：提前š

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

感谢。

来源

2012-07-17 V Neal

你尝试过这么远吗？如果您向我们显示您当前的代码，我们可能会帮助您更好地指导您。 – MrOBrian 2012-07-17 17:10:42

你真的需要用jQuery来做到这一点吗？检查了这一点：http://phrogz.net/css/vertical-align/index.html – 2012-07-17 17:13:35

嗨蒂姆 - 图像大小是动态的，所以我需要使用jquery获取高度，然后应用负边距。我不认为CSS可以做到这一点？ – 2012-07-17 17:24:33

此代码在前一段时间被发现。您可以这样使用它

$(".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-17 17:12:57

哟不需要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-17 17:33:08

我需要一个跨浏览器的解决方案。不幸的是，这似乎只适用于Firefox。 – 2012-07-17 17:37:15

它适用于FF，Chrome和IE8（或更高版本）如果你想支持IE7我粘贴了一个链接，解释你如何做到这一点。 – 2012-07-17 17:40:42

谢谢 - 但这仍然是行不通的... #imageColumn img { \t max-width：445px; \t max-height：333px; \t display：inline-block; \t vertical-align：middle; \t} – 2012-07-18 07:55:16

使用jQuery在一个div中垂直居中图像

回答

相关问题