用输入使图像居中？答案

【问题标题】：Centering an image with an input?用输入使图像居中？
【发布时间】：2012-12-02 10:10:33
【问题描述】：

我在输入旁边有一张图像，我想知道我是如何使两者相互居中的。我需要图像的中心与输入的中心垂直对齐。我该如何做到这一点？

标记：

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

【问题讨论】：

【解决方案1】：

在<img> 上将vertical-align 设置为中间应该会让你做生意：

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

你可以看到in action here。

【讨论】：

【解决方案2】：

你的图片应该有 ff 样式才能工作：

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

并在您的输入元素中添加

input { float: left; }

【讨论】：

【解决方案3】：

在 input 和 img 元素上设置垂直对齐对我有用：

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

【讨论】：