爲什麼這不是垂直居中？

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/

如果我改變的jsfiddle，使得anks行高是500像素，並刪除字體大小從容器，它的工作。

但是當我將字體大小添加到500px的容器中，然後在ank中將行高設置爲該字體大小的100％時，它不起作用。它會使圖像小於它應該在的位置。

工作的jsfiddle：http://jsfiddle.net/eujFY/1/

UPDATE：

該解決方案對我的作品： 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; 
}