이미지를 페이지 중앙에 수직으로 배치하는 방법

Question

page에서 "전자 제품 재활용을위한 자질"섹션 아래로 스크롤하면 다른 자격을 나타내는 3 개의 그래픽이 표시됩니다. 저는 그것들이 수평 적으로 중심에 있고 수직으로 중심에 위치하도록하고 싶습니다. 나는 첫 번째 부분을 가지고 있지만 두 번째 부분으로 고민하고있다. 어떤 도움을 주시면 감사하겠습니다.

Answer 1

JS 또는 CSS 솔루션을 원하십니까?

CSS : #에서 X는 컨텐츠 밴드-19

display:-webkit-box; 
-webkit-box-pack:center; 
-webkit-box-align:center; 

자바 스크립트 : 그냥, 각 자녀의 높이를 얻을, 그 세 된 div의 컨테이너 높이를 가지고 2로 DIFF와 격차를 빼기 그래서 처럼.

var ph = $('#x-content-band-19').height(); 
var ih = $('img').height(); 

$('img').css({top : (ph - ih)/2 }); 

Answer 2

내가 오해하지 않는 한 간단한 display: flex; 및 align-items: center; (div#x-content-band-19) (이미지의 부모)로 충분해야합니다.

Answer 3

Here은 CSS 트릭에서 멋진 링크입니다. 이것이 도움이 되었으면합니다.

CSS의 vertical-align 속성은 한 줄에 서로 나란히 설정된 요소가 정렬되는 방식을 제어합니다.

img { 
    vertical-align: middle; 
}