왜 수직으로 중심에 있지 않습니까?

Question

HTML 코드 :

<div class="container"> 
    <a class="ank"> 
    <img src="http://www.w3schools.com/images/w3schoolslogoNEW310113.gif" /> 
    </a> 
</div> 

CSS 코드 :

.ank 
{ 
    display: block; 
    width: 500px; 
    height: 500px; 
    line-height: 100%; 
} 

img 
{ 
    vertical-align: middle; 
} 

.container 
{ 
    display:block; 
    width: 500px; 
    height: 500px; 
    border: 1px solid black; 
    font-size: 500px; 
} 

jsfiddle : http://jsfiddle.net/mfBZZ/5/

제가 그 라인 높이 500 픽셀이다 anks 있도록 jsfiddle 변경 및 폰트 사이즈를 제거하는 경우 컨테이너에서, 그것은 작동합니다.

하지만 글꼴 크기를 500px의 컨테이너에 추가 한 다음 ank의 줄 크기를 100 %로 설정하면 글꼴 크기가 작동하지 않습니다. 그것은 이미지가 원하는 위치보다 더 낮게 가져옵니다.

작업 jsfiddle : http://jsfiddle.net/eujFY/1/

업데이트 :

이 솔루션은 나를 위해 작동 : http://jsfiddle.net/eujFY/2/ <을 ---- 업데이트되었습니다.

Answer 1

나는 해결책을 찾았지만 두 요소에서 높이를 수동으로 설정해야한다는 것을 알았지 만 불필요한 태그를 사용해야합니다. (용기) 및 "디스플레이 : 표 셀"(내부 요소) 규칙 : 그래서 난 당신이 "테이블 표시"를 확인하는 것이 좋습니다 http://jsfiddle.net/RxGS5/

HTML을

<div class="container"> 
    <a class="ank"> 
     <img src="http://www.w3schools.com/images/w3schoolslogoNEW310113.gif" /> 
    </a> 
</div> 

CSS

.container 
{ 
    display:table; 
    width: 500px; 
    height: 500px; 
    border: 1px solid black; 
} 

.ank 
{ 
    display: table-cell; 
    vertical-align: middle; 
}