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

Question

我在网页上有两个按钮，我正在尝试将“清除”按钮设置得更低，以与“搜索”按钮对齐。为什么Clear按钮太高了？

以下是一个实例：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

它很高，因为vertical-align CSS属性的默认值是baseline。这适用于display: inline的所有元素，其中包含<img>个元素。

尝试将其设置为middle：

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

Answer 2

替换它：

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

用这个：

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

Answer 3

这与图像的垂直对齐有关，图像是内联元素，并且设置为基线。添加'vertical-align：bottom'以排列它们。