如何對齊輸入字段中間的圖像？

Question

我想對齊一個小圖像，它位於文本框的垂直中間而不使用表格。 Icurrently有這樣一段代碼：

<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

Answer 2

封裝你輸入和圖像要麼成爲一個div或者TD，如果你有，再加入垂直對齊：中間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。