2011-04-05 79 views
0

我有這個page,如果你看看右上角的搜索...我需要移動文本搜索約2px,使其與圖像中心,但我的文本對齊垂直對齊或填充不做我所做的希望這裏是我的CSS將文字向上移動?

#Search { 
background: url("/images/no-letters-search.png") no-repeat scroll 0 0 transparent; 
border: medium none; 
font-size: 15px; 
height: 37px; 
left: 31px; 
padding-left: 26px; 
position: relative; 
top: -3px; 
width: 175px; 
font-family: Helvetica, sans-serif; 
} 

,這裏是我的html

<form id="search_form" method="post" action="/mm5/merchant.mvc?"> 
<input type="text" name="Search" id="Search" tabindex="0" /> 
<input name="Screen" type="hidden" value="SRCH" /> 
</form> 
+0

請問什麼瀏覽器? – 2011-04-05 21:09:33

+0

在Mac上的Firefox 4是我的瀏覽器,但我看着他們所有人 – Trace 2011-04-05 21:12:09

回答

2

呃,嘗試line-height:18px; - 可能做到這一點。

+0

沒有工作...我試圖在螢火蟲 – Trace 2011-04-05 21:14:19

+0

偉大的Firefox。在這裏使用Chrome,行高工作。 – 2011-04-05 21:17:29

0

如上所述,嘗試將行高設置爲以單行文本爲中心的輸入框的高度。

+0

試圖在fiebug和沒有 – Trace 2011-04-05 21:14:36

0

文本實際上已經以輸入字段爲中心。問題是你的輸入域比你放在它後面的實際圖像要高,所以在視覺上它看起來不合適(技術上它已經居中)。

您當前的輸入字段高度爲37像素,但由於輸入字段是包含邊框(中等)的框模型元素,因此您的框實際上大約爲41像素高。您需要刪除邊框或將輸入框的大小減小到34px或33px。

或者您可以正確地重寫「border:medium none;」到「邊界:0」。

如果沒有任何意義,我建議在位於http://www.w3.org/TR/CSS21/box.html處研究CSS盒模型。