Question

I have following HTML output which i can not change. These are just two links, one of them is text link, while other is the image.

The problem is that the image is appearing bit higher position than the text. I am trying to align the text in the middle of the image but not getting any success.

I have tried setting the padding-top, margin-top and vertical-align to the image, but none of them seem to work. I’ll appriciate any help.

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

Try using display: inline-block and vertical-align: middle: http://jsfiddle.net/e3vnQ/7/