Quel est le moyen le plus simple de centrer une image verticalement dans une ligne de texte?

Question

Actuellement j'utilise:

<table cellpadding="0" cellspacing="0"> 
    <tr><td><a href="cv.pdf" target="_blank"> 
    <img src="graphics/pdf.gif" width="24" height="24" /></a></td> 
    <td width="10px"></td> <!--that just spaces the image from the text--> 
    <td> 
     <a href="cv.pdf" target="_blank"><em>Download CV.</em></a> 
    </td></tr> 
</table> 

Jolie, mais maladroits rend parfaitement. Y a-t-il une meilleure façon de le faire?

Answer 1

Définissez la propriété CSS suivant sur votre image:

vertical-align: middle; 

Answer 2

Ditch la table, combiner les deux ancres en un seul, enlever la width et height sur l'étiquette img, enlever l'étiquette em, puis utilisation vertical-align pour centrer l'image. Vous pouvez également utiliser margin pour ajouter de l'espace entre le texte et l'image, et font-style pour le texte en italique.

HTML:

<p class="cv"> 
    <a href="cv.pdf"> 
     <img src="image/source.png" /> Download CV. 
    </a> 
</p> 

CSS:

.cv { 
    font-size: 14px; 
    line-height: 1.4em; 
    font-family: Arial, sans-serif; 
} 

.cv a { 
    text-decoration: none; 
    color: #999; 
} 

.cv img { 
    vertical-align: middle; 
    margin-right: 10px; 
} 

.cv a:hover { 
    color: #333; 
} 

Voir, beaucoup mieux. En supprimant width et height, vous améliorez l'affichage des images (car les navigateurs ne s'attachent pas à l'interpolation d'image.Si vous avez besoin d'une taille différente, vous devez le redimensionner.) La suppression de target="_blank" entraînera moins d'ennuis pour vos utilisateurs.

voir travailler ici: http://jsfiddle.net/kZeCt/1/