在文本框旁邊對齊圖像

Question

我在對齊文本框旁邊的圖像時遇到困難。我想知道除了設置填充和邊距以外，是否有一種簡單的方法來實現它。因爲這些措施在每個瀏覽器中可能會有所不同我已經做了小提琴http://jsfiddle.net/wD5T9/

<div id='searchWrapper'> 
<input id='searchBox' style='width:250px; border:1px solid #cccccc; border-radius:7px 7px 7px 7px; padding:5px 28px 5px 10px; margin-top:14px; margin-left:50px;height:18px;' type='text' placeholder='Search'/><img src='http://www.q-park.ie/Portals/8/images/search-icon.png'/> 
</div> 

Answer 1

只需添加到CSS：

#searchWrapper img { 
    vertical-align: middle; 
} 

Answer 2

每當我嘗試非常微妙的位置的東西，我選擇使用這種方法：

position:relative; 

然後我通過使用top, left, right and buttom.

http://jsfiddle.net/wD5T9/5/

希望這會有幫助