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;
}

<强>更新对于textareas，没有什么特别的要求。我确实有更新。您应该将包装器div显示为inline-block

Answer 2

将输入和图像封装到div或td（如果有），然后将vertical-align：middle添加到img：

 <div>
    <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; vertical-align: middle;" /><br/>
</div>

Answer 3

有很多方法可以完成你想要做的事情。我会告诉你两种方法。请记住，在这些情况下，没有“必须”。您必须选择（不一定是我告诉您的其中一种）最适合您需求的方式（布局需求等）

相对定位

http://jsfiddle.net/nBMMJ/4/

给予元素position:relative并为其top属性设置值可能会给您带来不错的结果。

垂直对齐底部

http://jsfiddle.net/nBMMJ/6/

要对齐图片，您可以使用vertical-align:bottom。在这种情况下，为了帮助居中，我使用了margin-bottom。

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

3 个答案: