jQuery를 사용하여 div의 수직 중심 이미지

Question

누군가가 올바른 방향으로 나를 가리킬 수 있다고 생각합니다.

저는 이미지의 높이가 일정한 경우 CSS를 사용하여 div 내에서 이미지의 세로 가운데 정렬을 시도했습니다. 그러나 (항상 그렇듯이) 사물은 그만큼 단순하지 않으며 이미지 높이는 거의 모든 경우에서 다릅니다.

이미지의 절반 높이의 음수 여백을 이미지에 추가하여 div의 가운데로 가져올 수 있기를 바랍니다.

내가 어떻게하는지에 대한 제안이 있으십니까?

이 작동하지 않는 것 : 사전에

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

감사를 S.

Answer 1

이 코드는 몇 시간 전에 발견되었습니다. 이런 식으로 사용하십시오

$(".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); 

Answer 2

요 그것을 위해 jQuery를 필요로하지 않습니다는, CSS는 그것을 할 수 있습니다. 그냥으로 이미지를 설정합니다

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

을 또한 당신이 거기 당신이 IE7에서 인라인 블록을 지원하기 위해 해킹에 대해 궁금해하는 경우 : http://www.kollerat.com/cms/index.php/Web-admin/HTML/IE7-and-inline-block.html