如何垂直对齐图像并输入 type="text" 填充表格单元格？答案

【问题标题】：How to vertically align image and input type="text" filling the table cell?如何垂直对齐图像并输入 type="text" 填充表格单元格？
【发布时间】：2012-08-08 11:42:05
【问题描述】：

我有 input type="text" 和 image 按钮，我想输入来填充 tabe 单元格。我使用来自Style input element to fill remaining width of its container 的解决方案，但是两个元素的垂直对齐 都有问题。我需要将元素的中心放在相同的高度上。 HTML：

<table border="1" >    
  <tr><td>
      <div style="width:200px">hhhh
      </div></td><td>sssss</td>
  </tr>      
  <tr>
    <td >
      <div style='width:100%;display:table'>        
        <INPUT type='text' class='txt' ID='A12x1' NAME='A12x1'   />
        <input style='display: table-cell;' type='image' class='btn' src='http://myimages.bravenet.com/109/910/420/9/Arrow.png'/>
      </div></td><td>kpu</td>
  </tr>
</table>

CSS：

    .txt 
{ BORDER: silver 1px solid;  
  width:100%;
  vertical-align:middle;
  display: table-cell;
    }

.btn{ cursor: pointer;
       width: 18px;
    height: 26px;
    vertical-align: middle;
    }

http://jsfiddle.net/xqaN4/4/

我尝试了各种对齐组合，在第二位<img>、<span> 或<div> 与背景图像没有成功。最好的解决方案是在<div>s 中包含这两个元素（显示：table-cell），但是这个解决方案破坏了在 chrome 中填充宽度。

第二个问题是实现输入和按钮高度一致。

我需要兼容 IE8+、Firefox、saf (Chrome)。
注意：图片是在网络上找到的示例。

【问题讨论】：

标签： html css html-table cross-browser

【解决方案1】：

检查一下

水平对齐

http://jsfiddle.net/xqaN4/5/

.txt
{ BORDER: silver 1px solid;  
  vertical-align:middle;
  display: table-cell;
    }

垂直对齐

http://jsfiddle.net/xqaN4/7/

【讨论】：

宽度：100%；是我在输入文本上需要的。我需要填充容器单元格。