将图像与输入居中？

Question

我的输入旁边有一张图像，我想知道如何将两者彼此居中。我需要图像的中心与输入的中心垂直对齐。我怎样才能做到这一点？

标记：

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

Answer 1

将 上的垂直对齐设置为中间应该会让您有所收获：

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

您可以看到它 在此采取行动。

Answer 2

您的图像应该具有 ff 样式才能工作：

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

并在您的输入元素中添加

input { float: left; }

Answer 3

在输入和 img 元素上设置垂直对齐对我来说很有效：

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

在此处检查