동적으로 높이와 여백을 jQuery를 사용하여 크기를 변경하십시오.

Question

이것이 가능한지 궁금합니다. 나는 내가 화면에 내 div의 중심을 할 수있는 페이지와 부정적인 위쪽 여백이 각 특정 사업부의 높이를 가져 오기 위해 jQuery를 몇 줄을 설정 (표준 방법 (http://goo.gl/R6HfF))

$(window).load(function() { 
    $('.each-web-project-info > div').each(function() { 
     eachWebProjectInfoHeight = $(this).height(); 
     $(this).css('height',eachWebProjectInfoHeight+'px'); 
     $(this).parent().css('margin-top',-eachWebProjectInfoHeight -35+'px'); 
    }); 
}); 

프레임 워크 저는 건물이 반응 형이므로 div의 폭은 -25 %의 여백을두고 백분율 (50 %)로 설정됩니다. 따라서 화면의 크기가 변함에 따라 div의 위치는 세로 및 가로로 가운데에 맞춰지지 않습니다.

그래서, 그 배경으로 내가하고 싶은 것은 각 div의 높이를 가져 와서 margin-top에 크기를 조정할 때 음수로 적용되도록 내 코드를 변경하는 것입니다.

어떤 도움을 주시면 감사하겠습니다, -R

Answer 1

당신은 윈도우 다시 크기의 이벤트 div의 마진 업데이트를 결합해야합니다. 이런 식으로 뭔가 :

$(function() { 

    updateDivsMargins(); 
    $(window).resize(updateDivsMargins); 

    function updateDivsMargins() { 
     $('div.centered').each(function() { 
      $(this).css({ 
       'margin-top': (-$(this).height()/2), 
       'margin-left': (-$(this).width()/2) 
      }); 
     }); 
    } 

}); 

작업 바이올린 : http://jsfiddle.net/DpBky/5/