aligner une image avec CSS

Question

J'ai la sortie HTML suivante que je ne peux pas changer. Ce ne sont que deux liens, l'un d'entre eux est un lien texte, tandis que l'autre est l'image.

Le problème est que l'image apparaît en position légèrement plus élevée que le texte. J'essaie d'aligner le texte au milieu de l'image mais sans succès.

J'ai essayé de régler les padding-top, margin-top et vertical-align à l'image, mais aucun d'entre eux ne semble fonctionner. Je vais appriciate toute aide.

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

Essayez d'utiliser display: inline-block et vertical-align: middle: http://jsfiddle.net/e3vnQ/7/

Answer 2

ajouter 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

vous pouvez écrire le css comme ceci: -

quand tag anchor viendra en p tag restera vertical-align:middle; par mentionné ci-dessous css

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

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

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

ou voir la démo: - http://jsfiddle.net/e3vnQ/13/