非常基本的CSS高度问题

我有一个图像在侧面的div和超链接旁边。问题在于超链接显示在图像的最底层。我想在图像的中心显示它。非常基本的CSS高度问题

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/

来源

2011-08-17 mari

[如何将文字放在图像中间]的可能重复（http://stackoverflow.com/questions/4580880/how-to-put-text-on-the-middle-of-an-image ） – mercator

.image { 
vertical-align:middle  
}

来源

2011-08-17 19:53:47

在这里你去

.main{ 
    border:1px solid red; 
} 

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

一个图像的位置设置为绝对手段的任何元素漂浮在它。然后在文本/链接设置线高度基本上是高度，所以我们匹配的图像高度。它也很好地设置相对的文本/链接位置，以确保它也能在IE中工作。

来源

2011-08-17 19:56:32 dciso

非常基本的CSS高度问题

回答

相关问题