爲什麼我的圖片在頁面上如此之高？

Question

我在網頁上有兩個按鈕，我試圖讓「清除」按鈕稍微低一些，以便與「搜索」按鈕對齊。爲什麼清除按鈕如此之高？

這是一個活生生的例子：http://www.davidjpotter.com/temp/test.php

<table border=1> 
<tr> 
<td> 
    <button type="submit">Search</button> 
    <img src="../images/button-clear.png"> 
</td> 
</tr> 
</table> 

Answer 1

替換此：

<img src="../images/button-clear.png"> 

與此：

<img src="../images/button-clear.png" style="vertical-align: bottom; "> 

Answer 2

這是很高，因爲vertical-align CSS屬性的默認值是baseline。這適用於所有含有display: inline的元素，其中包括<img>元素。

嘗試，而不是將其設置爲middle：

<img src="../images/button-clear.png" style="vertical-align:middle" /> 

Answer 3

這與它是圖像的垂直對齊方式做內聯元素並將其設置爲基線。添加'vertical-align：bottom'來排列它們。