Question

我有输入type =“text”和图像按钮，我想输入填充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（display：table-cell）中包含这两个元素，但是这个解决方案突破了chrome中的宽度。

第二个问题是实现输入和按钮的相同高度。

我需要兼容IE8 +，Firefox，saf（Chrome）。
注意：图像是网络中的一个示例。

Answer 1

检查

水平对齐

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

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

垂直对齐

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

如何垂直对齐图像和输入类型=“文本”填充表格单元格？

1 个答案: