非常基本的 CSS 高度问题答案

【问题标题】：very basic CSS height question非常基本的 CSS 高度问题
【发布时间】：2011-10-29 05:46:31
【问题描述】：

我在 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/

【问题讨论】：

how to put text on the middle of an image的可能重复

标签： html css

【解决方案1】：

.image {
 vertical-align:middle    
}

【讨论】：

【解决方案2】：

给你

.main{
    border:1px solid red;
}

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

将图像的位置设置为绝对位置意味着任何元素都会浮在其上。然后在文本/链接设置 line-height 基本上是高度，所以我们匹配图像高度。将文本/链接位置设置为相对也很好，以确保它也可以在 IE 中工作。

【讨论】：