Centering an image with an input?

I have an image next to an input, and I was wondering how I centered both with one another. I need the center of the image to be vertically aligned with the center of the input. How do I make this happen?

Markup:

<span class="my-span">
  <input 开发者_StackOverflowtype="text" .../><a href="..."><img .../></a>
</span>

Setting the vertical-align to middle on the <img> should put you in business:

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

You can see it in action here.

Your image should have the ff styles to work:

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

and to your input element, add

input { float: left; }

Setting vertical-align on both input and img elements works for me:

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

Check it here