html - 如何在输入字段的中间对齐图像？

Question

我想在文本框的垂直中间对齐一个小图像而不使用表格。我目前有这段代码:

<input type="text" style="border-color: #FF0000; border-radius: 10px; height: 40px; width: 35%; font-size: 30px; padding-left: 5px; padding-right: 5px;" placeholder="Name" name="name"/>
<img src="http://surfcamp.infinibrain.net/images/error.png" style="height: 32px; width: 32px; margin-left: 5px;" /><br/>

JSFiddle

如您所见，图像贴在文本框的顶部。我还尝试将 vertical-align: middle; 添加到 img。

Answer 1

这是您想要实现的目标吗？

Fiddle

<div class="lol">
    <input type="text" style="border-color: #FF0000; border-radius: 10px; height: 40px; width: 35%; font-size: 30px; padding-left: 5px; padding-right: 5px;" placeholder="Name" name="name" />
    <img src="http://surfcamp.infinibrain.net/images/error.png" style="height: 32px; width: 32px;" />
</div>
<br/><br/><br/><br/>
<div class="lol">
    <textarea></textarea>
    <img src="http://surfcamp.infinibrain.net/images/error.png" style="height: 32px; width: 32px;" />
</div>

---

.lol {
    display:inline-block;
    position:relative;
}
.lol img {
    position:absolute;
    top:50%;
    right:7px;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
}
.lol input {
    padding-right:40px !Important;
    width:200px !Important;
}
.lol textarea{
    padding-right:40px;
    min-height:30px;
}

---

更新对于文本区域，没有什么特别的要求。不过我确实有更新。您应该将包装器 div 显示为 inline-block