字段 alignment 問題 Css

Question

嘿，這是我的問題，我無法將這些輸入字段與這些圖像對齊，它們在一個 div 中，我將粘貼下面的代碼

那么你建議我應該怎么做，遇到這個問題，需要一個快速的答案plz

<div style="margin-bottom: 5px;"> 

 <input type="text" id="queryInput" value="pizza" style="width: 180px; height:30px;border: 1px solid #d3d6d9;padding: 4px 10px 2px 10px;background-color: white;-moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;border-radius: 5px;  font-size: 12px;   font-family: Droid Sans, Arial, sans-serif;"/> 
 <a href="javascript:doSearch()"><img src="img/search.png" /></a> &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
 <a href="javascript:toggleStreetView()"><img src="img/street.png" /></a>
 <a href="javascript:toggleGoogleView()"><img src="img/google.png" /></a>

</div> 

Answer 1

嘗試這個

http://jsfiddle.net/K8rHG/

Answer 2

css：

#queryInput {
    margin-top: -10px;
    float: left;
}

Answer 3

一般來說，要垂直對齊盒子，最好的方法之一是讓它們都成為塊狀盒子（這樣它們可以接受寬度和高度），然后將它們的高度設置為最高的盒子，然后嘗試垂直對齊內容在每個盒子里。 在您的特殊情況下，搜索框的高度為 30px。 但是正如@Jawad所說，您應該包含父div的 CSS 以及其他元素的 CSS ，以便我們提供幫助。

Answer 4

 div input, div a{
    display:inline-block;
    vertical-align:top;
    float:none;
    margin:0px;
    .display:inline;
    .zoom:1;
}

Answer 5

1. 盡量避免內聯 styles，是嗎？

2. 垂直居中圖像，它們將與文本框對齊：

   <樣式> div img { 垂直對齊：中間； }</style>

http://jsfiddle.net/mSgVg/