使用jQuery在div中垂直居中

Question

Hoping someone can point me in the right direction.

I've been trying to vertically center an image within a div, which I can do using CSS IF the height of the image is consistent. However (as always) things aren't as simple as that and the image height is different in pretty much every instance.

I'd like to be able to add a negative margin of half the image height, to the image, to pull it into the center of the div.

Any suggestions in how I do that?

This doesn't seem to be working :S

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

Thanks in advance.

Answer 1

This code was found on SO some time ago. You use it like this

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

It calculates height of the parent element and centers it accordingly.

Function:

(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);

Answer 2

Yo do not need jQuery for it, CSS could do it. Just set your image to be:

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

Also if you wonder for a hack to support inline-block on IE7 there you have: http://www.kollerat.com/cms/index.php/Web-admin/HTML/IE7-and-inline-block.html