非常基础的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/

- mari

---

可能是如何将文本放置在图像中央的重复问题。 - mercator

Answer 1

.image {
 vertical-align:middle    
}

- Diodeus - James MacFarlane

Answer 2

给你

.main{
    border:1px solid red;
}

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

设置图像位置为绝对定位意味着任何元素都会浮在其上方。然后，在文本/链接设置行高时，基本上是匹配图像高度的高度。将文本/链接位置设置为相对位置也很好，以确保它在IE中也能正常工作。

- dciso