为什么我的图片在页面上如此之高？

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'来排列它们。