html - 为什么按钮(还有图像)倾向于隐藏在文本行下方？

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属性(property)会解决它，但事实并非如此。我在添加 <img> 时也遇到了同样的问题标签到文本。

Answer 1

当我遇到类似的对齐问题时，尤其是在处理行内 block 元素时(没有足够的经验来了解表格在相似性方面的相关程度)，通常对我有帮助的是一些组合:

• 垂直对齐:顶部；
• 调整高度:;
• 调整padding-top:;或者更常见的是 margin-top:;从那里重新对齐图像

又名:代替 v 对齐中心，v 对齐从顶部开始并使用填充/边距从那里定位。希望这对一些人有所帮助。