Question

我有以下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/

Answer 1

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

Answer 2

添加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;   
}

Answer 3

你可以这样写 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/

使用CSS对齐图像

3 个答案: