Центрирование изображения с помощью ввода?

Question

У меня есть изображение рядом со входом, и мне было интересно, как я отцентрировал оба друг друга. Мне нужно, чтобы центр изображения был вертикально выровнен с центром ввода. Как мне это сделать?

Markup:

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

Answer 1

Установка вертикального выравнивания по центру на <img> должна помочь вам:

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

Вы можете увидеть в действии здесь .

Answer 2

Настройка вертикального выравнивания на элементах input и img работает для меня:

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

Проверьте это здесь

Answer 3

Ваше изображение должно иметь стили ff для работы:

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

и к вашему элементу ввода добавьте

input { float: left; }