div 내의 세로 맞춤 이미지

Question

나는 여러 번 질문을 받았지만 나에게 맞는 대답을 찾을 수 없다는 것을 알고있다. 이미지가 모두 같은 크기가 아닌 여러 웹 페이지 용입니다. 나는 수직 정렬, 표 셀, 라인 높이 및 언급 된 모든 것을 시도했다.

HTML : http://www.joekellywebdesign.com/UpdatedSite/services.html

<div id="contentright"> 
      <img src="images/internet.jpg"> 
    </div> <!-- end of contentright div --> 

CSS 다음 img에 http://www.joekellywebdesign.com/UpdatedSite/css/styles.css

#contentright { 
float: right; 
background-color:#FFF; 
width: 450px; 
height: 350px; 
display: table-cell; 
vertical-align: middle; 
text-align: center; 
line-height: 350px;} 

Answer 1

사용 vertical-align: middle; - 내가 크롬에서 F12의 개발 도구를 통해 그것을 시도하고 일했다.

#contentright img { 
    vertical-align: middle; 
} 

이 부모가 display:table-cell로 설정되어 있기 때문에 작동하고, 나는 그 시도했지만이 작업을 수행 생각 vertical-align: middle

jsFiddle here