非常基本的CSS高度問題

Question

我有一個圖像在側面的div和超鏈接旁邊。問題在於超鏈接顯示在圖像的最底層。我想在圖像的中心顯示它。

HTML：

<div class="main"> 
<img class="image" src="http://aux.iconpedia.net/uploads/16149178162137949115.png" alt="smiley" /> 
<a class="link" href="#">move it up in the center to the smiley</a> 
</div> 

CSS：

.main{ 
    border:1px solid red; 
} 

.image{ 
    border:1px solid green; 
} 
.link{ 
    /*height:30px;*/ 
} 

的jsfiddle：

http://jsfiddle.net/cTRsY/

Answer 1

.image { 
vertical-align:middle  
} 

Answer 2

在這裏你去

.main{ 
    border:1px solid red; 
} 

.image{ 
    border:1px solid green; 
    position:absolute; 
} 
.link{ 
    line-height:65px; 
    position:relative; 
} 

一個圖像的位置設置爲絕對手段的任何元素漂浮在它。然後在文本/鏈接設置線高度基本上是高度，所以我們匹配的圖像高度。它也很好地設置相對的文本/鏈接位置，以確保它也能在IE中工作。