爲什麼按鈕（以及圖像）傾向於在文本行下潛入？

Question

我想打一個表格單元格內的一個簡單的搜索方式：

<td style="vertical-align: center"> 
    <div id="search"> 
     <form action="search" method="get"> 
     Search: 
     <input type="text" value="enter something" class="autoempty" /> 
     <button type="submit"></button> 
     </form> 
    </div> 
</td> 

按鈕應該有一個搜索圖標，使用這個CSS：

div#search button { 
    /*reset the normal button behavior*/ 
    padding: 0px; 
    border-width: 0px; 
    border-style: none; 
    background-color: transparent; 
    /*Make it square*/ 
    width: 30px; 
    height: 30px; 
    /*set background*/ 
    background-image: url("../images/search_grey.png"); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: contain; 
    /*fancy cursor*/ 
    cursor: pointer; 
} 

這是什麼樣子：

顏色顯示由Firebug顯示的元素尺寸。淺藍色是<td>元素。
我希望vertical-align屬性可以修復它，但它沒有。我在將<img>標籤添加到文本時也遇到同樣的問題。

Answer 1

添加到您的CSS

#search button, #serach input 
{ 
    display: inline-block; 
    vertical-align: middle; 
} 

Working Fiddle

Answer 2

當我有類似的對齊問題，特別是inline-block的元素（沒有足夠的經驗知道表如何密切相關的，在相似的條件）打交道時，什麼通常幫助我的是一些組合：

• vertical-align：top;
• 調整高度;
• 調整padding-top :;;或者更常見的是，利潤率最高的;從那裏重新對齊圖像

也就是說，不是v對齊中心，而是從頂部v對齊，並使用填充/邊距從那裏定位。希望這有助於一些。