HTML - 表行垂直对齐问题

Question

我似乎无法将这些元素垂直对齐（请参阅随附的屏幕截图） Expectation vs Reality...（黑色斑点是一个数字字段）

我尝试过将CSS样式应用于所有内容 - vertical-align：middle; vertical-align：text-top; vertical-align：center; 而且，就一切而言，我的意思是，形式，文本字段，行......似乎没什么用。

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

 <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;
}

Answer 2

垂直对齐=＆＃34;中间＆＃34; - 是HTML元素的无效属性。请改用css规则 或属性style =＆＃34; vertical-align：middle＆＃34;

＆＃13;

＆＃13;

input {
  vertical-align: middle
}

img {
  vertical-align: middle
}

＆＃13;

 <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"  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>

＆＃13;

＆＃13;

＆＃13;