HTML - 表格行垂直对齐问题

Question

我似乎无法让这些元素垂直对齐(参见随附的屏幕截图) Expectation vs Reality... (那个黑色 Blob 是一个数字字段)

我已经尝试将 CSS 样式应用于所有内容 - vertical-align: middle;垂直对齐:文本顶部；垂直对齐:居中； 就一切而言，我的意思是，表单、文本字段、行……似乎没有任何效果。

我需要一些专家建议。 谢谢 下面的代码

 <tr id="Row4">
  <td width="421" align="right">
        <form name="form7" id="form7" action="sendSMSCommand.php" method = "post" onsubmit="return confirm('Are you sure you want to send an SMS command?');"  >
         <input type="number"  class="textbox" vertical-align="middle" min ="0" max = "1440" name="timeField7" id="timeField7">
         <input type="image" name="imageField7" id="imageField7" onmouseup= "SendCMD(7)" onmousedown="changeImage(7)" src="img/ButtonBlueb.png" width="58" height="58" value="">
         <img src="img/on.png" alt="" width="55" height="55" id="IO7" name="IO7"/>
   </form>   
</td>
</tr>

Answer 1

试试这个 css 来自 http://jsbin.com/zepilidena/1/edit?html,css,output

td{
    height: 160px; /*can be anything*/
    width: 160px; /*can be anything*/
    position: relative;
}
.textbox, #imageField7{
    max-height: 100%;  
    max-width: 100%; 
    width: auto;
    height: auto;
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;
}