JQuery Vertical Align Function

Question

인터넷에서 CSS 트릭을 발견하고 요소를 수직으로 정렬했습니다 (링크 : http://www.vdotmedia.com/blog/vertically-center-content-with-css/, 정확하지는 않지만 같은 생각입니다.).

내가 JQuery와 기능에 넣어하기로 결정 : 첫 번째 DIV에 (일명 '이')

$.fn.centreVertical = function() 
    { 
     $(this).wrap(                                  //centered element 
      $("<div/>").css({'position':'relative','top':'-50%'}).wrap(                  //child 
       $("<div/>").css({'position':'absolute','top':'50%','display':'table-cell','vertical-align':'middle'}).wrap(  //parent 
        $("<div/>").css({'margin':'auto','display':'table','height':'100%','position':'relative','overflow':'hidden'}) //grandparent 
       ) 
      ) 
     ); 
    }; 

내 문제는 단지 요소를 래핑 즉, 랩의 나머지는하지 않는 것 효과를 얻으려면 html을 확인하고 첫 번째 div와 요소 만 봅니다.

누구나 알고 계십니까? 아마도 이것을 할 수있는 더 좋은 방법이 있을까요?

Answer 1

기술이 원하는대로 할 수 있는지는 말할 수 없지만 지정한 순서대로 div에 요소를 래핑하려면 체인에 parent() 호출을 추가하여 ' 권리 요소를 포장 재 :

$.fn.centreVertical = function() { 
    $(this).wrap('<div/>').css({ 
    'position': 'relative', 
    'top': '-50%' 
    }).parent().wrap('<div/>').css({ 
    'position': 'absolute', 
    'top': '50%', 
    'display': 'table-cell', 
    'vertical-align': 'middle' 
    }).parent().wrap('<div/>').css({ 
    'margin': 'auto', 
    'display': 'table', 
    'height': '100%', 
    'position': 'relative', 
    'overflow': 'hidden' 
    }); 
}; 

내가 권하고 싶습니다 다른 것은 당신이 그럼 그냥 요소에 addClass()를 호출하는 대신 CSS를 정의 사업부에 적용 할 스타일로 어떤 클래스를 정의하는 것입니다 속성을 직접 스타일 속성으로 요소에 추가합니다.

또한 inspect 요소를 사용하거나 뷰 소스 | Web Developer toolbar 부가 기능을 FF로 생성하여 동적으로 추가 된 요소를 표시하지 않는 HTML 소스가 아닌 DOM이 있는지 확인하십시오.

Answer 2

function alignVertical(){ 
    $('.align-vertical').each(function() { 
     var that = $(this); 
     var height = that.height(); 
     var parentHeight = that.parent().height(); 
     var padAmount = (parentHeight/2) - (height/2); 
     that.css('padding-top', padAmount); 
    }); 
} 

클래스 정렬 - 수직을 사용하고이 기능은 창로드에서 사용하십시오!