3

我有以下 HTML 输出，我无法更改。这只是两个链接，一个是文本链接，另一个是图像。

问题是图像的位置比文本高一些。我试图在图像中间对齐文本，但没有取得任何成功。

我尝试将padding-top,margin-top和设置vertical-align为图像，但它们似乎都不起作用。我会给予任何帮助。

HTML：

<p>
    <a href="#" class="link">
        <img width="14" height="14" src="http://i50.tinypic.com/f08ehe.jpg">
    </a>
    <a href="#" class="link">my title</a>
</p>

CSS：

.link img{
   margin-top: 5px;   
}

JSFiddle：http: //jsfiddle.net/e3vnQ/

4

3 回答 3

4

尝试使用display: inline-block和vertical-align: middle：http: //jsfiddle.net/e3vnQ/7/

于 2012-08-22T07:59:16.763 回答
1

添加align="top"

<p>
    <a href="#" class="link">
        <img width="14" height="14" src="http://i50.tinypic.com/f08ehe.jpg" align="top">
    </a>
    <a href="#" class="link">my title</a>
</p>

CSS：

.link img{
   margin-top: 5px;   
}
于 2012-08-22T07:59:10.823 回答
1

你可以这样写CSS：-

当anchor标签进入时，p标签将保留vertical-align:middle;在下面提到的css中

p{
    font-size: 12px;
    border: 1px solid red;

}
p a {
    display:inline-block;
    vertical-align:middle;

}
.link img{
   margin-top: 5px;    
}

或查看演示：- http://jsfiddle.net/e3vnQ/13/

于 2012-08-22T08:07:48.467 回答