업로드 된 이미지 미리보기의 수직 중심 맞춤

내 사이트에 사용자 업로드 이미지 미리보기가 표시되지만 div에 세로로 가운데 놓을 수 있기를 원합니다.업로드 된 이미지 미리보기의 수직 중심 맞춤

reader.onloadend = (function() { 
    var $parentDiv = $img.parent(); 
    $img.css('margin-top', ($parentDiv.height() - $img.height())/2); 
});

내가 읽은 FileReader documentation는 onloadend이 될 것이라고 믿고 날 리드 : 나는 다음과 같이이 업로드가 완료 된 후에는 이미지의 margin-top 사용하여 자바 스크립트를 설정하여이 작업을 수행하려고했습니다 ($img 문제의 이미지입니다) 파일 업로드가 완료되면 호출되며 그럴 것 같습니다. 그러나 이미지의 크기와 관계없이 은 onloadend이 호출 될 때 0을 반환합니다.

이것은 단순히 값을 아직 사용할 수 없기 때문인 것으로 보입니다. 두 번째 이미지를 업로드 (기존 이미지 미리보기를 지우는 경우) 한 다음 첫 번째 이미지를 다시 업로드하면 기능이 작동합니다. $img.height()은 올바른 값을 반환합니다. 나중에 콘솔을 통해 호출해도 올바르게 반환됩니다.

처리 방법이 있습니까? .height()의 값이 0보다 커질 때까지 간격을두고 호출하는 것 외에는 사용할 수있는 방법을 알고 있습니까? 감사!

출처

2012-06-26 jonmorgan

왜 CSS로 수직 센터링을 처리하지 않습니까? 당신은 HTML5를 사용하고 있기 때문에 오래된 브라우저를 지원하고 싶지 않으므로'display : table-cell; vertical-align : middle;'부모에게'div'. – thirtydot

Michał Czernow의 '유령 요소'CSS 수직 중심 맞춤 기술 (CSS Tricks: Centering in the Unknown)의 변형으로 제로 높이 문제를 해결할 수 있어야합니다. 이것은 이미지의 자바 스크립트 조작을 필요로하지 않습니다.

당신의 컨테이너 사업부에 의사 요소를 추가 할 수

사용 CSS : vertical-align: middle;와

'유령'요소는 기본적으로 이미지를위한 발판이된다 그건

.container:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; /* Adjusts for spacing */ 
}

, 스타일의 이미지와 이미지를 업데이트 할 때마다 그것을해야 그냥 일이야.

이것이 작동하는 방법을 보여주는 jsfiddle입니다.

출처

2012-06-26 16:05:33 joemaller

완벽하게 작동합니다! 감사. – jonmorgan

이미지의 '너비'가 정의되어 있는지 확인하십시오. 예 : 'width : 100 %'나'width : calc (100 % - 1px)'에 대해서 말입니다. – Hengjie

업로드 된 이미지 미리보기의 수직 중심 맞춤

답변

관련 문제