수직 정렬이 작동하지 않는 것 같습니다

Question

<li>에서 다른 div로 이동하는 div에서 묶는 이미지에 애니메이션을 적용하고 있습니다. 대상 div에 내용이있는 범위가 포함되어 있습니다.

이미지 div를 대상 div에 추가하면 모든 내용 (범위 텍스트 및 추가 된 img div)이 수직 가운데에 위치해야합니다.

var des = $(".destnation").position(); 
var el = $(".toMove"); 
el.css("position", "absolute"); 
el.animate({ top: des.top+"px" ,left :des.left+"px"}, 2000, undefined, function() { 
el.remove().appendTo(".destnation").css("position", "static"); 
}); 

.destination { 
    height: 4.9em; 
    width: 100%; 
    overflow: hidden; 
    text-align: left; 
    vertical-align: middle; 
} 

.destination span { 
    color: #3366CC; 
    font: 1.50em georgia, garamond, serif; 
    margin-top: 0.625em; 
    margin-bottom: 0.625em; 
    display: block; 
} 

Answer 1

HTML 너비가 높이가 아닌 배율입니다.

테이블에서 세로 맞춤을 사용하면 예상대로 작동합니다. <td style="vertical-align:middle">

정규 수업에서는 항상 올바르게 작동하지는 않습니다.