为什么按钮（以及图像）倾向于在文本行下潜水？

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

当我遇到类似的对齐问题时，特别是在处理内联块元素时（没有经验足以知道表格在相似性方面与表格的关系），通常可以帮助我的是：

• vertical-align：top;
• 调整身高：;
• 调整填充顶部：;或更常见的是，margin-top：;从那里重新对齐图像

AKA：不是v-aligning center，而是从顶部对齐并使用填充/边距从那里定位。希望这会有所帮助。

Answer 2

将此添加到您的CSS

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

Working Fiddle