이 이미지를 세로로 배치하는 방법?

Question

div를 기본 래퍼로 사용한 다음 이미지 래퍼 div를 이미지 래퍼로 사용하고.

내가 원하는 것은 저해상도 (예 : 1300px)에서는 이미지 래퍼 div가 세로로 정렬 된 채로 있습니다. 자, 당신이 그것을 볼 때, 그것은 수직으로 정렬되지 않습니다. 상단 패딩은 이미지 래퍼 div를 상단에 붙이는 반면 하단에는 큰 간격을 유지합니다.

http://namdarshirazian.com

그것은 홈페이지에서 일어나는 : 여기

는 사이트입니다. 중앙 이미지. 여기

#homepage-image 

이 세

#homepage-image 
{ 
    padding: 20px 20%; 
    border: 2px #CCC solid; 
    background-color: white; 
    text-align: center; 
    overflow: hidden; 
    height: 540px; 
} 
#homepage-image div 
{ 
    height: 495px !important; 
    padding: 0px !important; 
} 
#homepage-image div img 
{ 
    width: 100% 
} 

의 CSS입니다 그리고 여기 요소의 마크 업입니다 :

<div class="image" id="homepage-image"> 
       <div style="height: 520px; overflow: hidden;"> 
        <img src="photo/homepage/image.jpg" alt="" title=""> 
       </div> 

      </div> 

여기

는 주요 사업부의 ID입니다 CSS는 style.css 줄에 있습니다.

실시간 편집을 수행해 주셔서 감사합니다. 미리 감사드립니다.

Answer 1

<div class="image" id="homepage-image"> 
    <div style="height: 520px; overflow: hidden; white-space: nowrap;"> 
     <span class="keepImgVerCenter"></span> 
     <img src="photo/homepage/image.jpg" alt="" title=""> 
    </div> 
</div> 

.keepImgVerCenter{ 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
} 

희망이 있습니다.