0

我想在表格单元格中创建一个简单的搜索表单：

 <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>在向文本添加标签时，我也遇到了同样的问题。

4

2 回答 2

2

当我遇到类似的对齐问题时，尤其是在处理 inline-block 元素时（没有足够的经验知道表格与表格在相似性方面的关系有多密切），通常对我有帮助的是以下几种组合：

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

又名：不是 v-aligning center，而是 v-align from top 并使用 padding/margin 从那里定位。希望这会有所帮助。

于 2013-09-26T19:31:22.547 回答
1

将此添加到您的 CSS

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

工作小提琴

于 2013-09-26T20:20:27.287 回答