Centrer une image avec une entrée?

Question

J'ai une image à côté d'une entrée, et je me demandais comment je me centrais les uns avec les autres. J'ai besoin que le centre de l'image soit aligné verticalement avec le centre de l'entrée. Comment puis-je y arriver?

Markup:

<span class="my-span"> 
    <input type="text" .../><a href="..."><img .../></a> 
</span> 

Answer 1

Réglage de la verticale à aligner sur le milieu <img> devrait vous mettre dans les affaires:

<span class="my-span"> 
    <input type="text" .../><a href="..."><img ... style="vertical-align: middle"/></a> 
</span> 

Vous pouvez le voir in action here.

Answer 2

Votre image doit avoir les styles et suivants pour travailler:

img { vertical-align: middle; display: table-cell; } 

et à votre élément d'entrée, ajoutez

input { float: left; } 

Answer 3

Réglage vertical aligner sur les deux éléments d'entrée et img fonctionne pour moi:

<span class="my-span"> 
    <input type="text" style="vertical-align: middle" /><a href="..." ><img style="vertical-align: middle" ... /></a> 
</span> 

Check it here