HTML - 表格行垂直对齐问题

Question

我似乎无法使这些元素垂直对齐（请参见附加的截屏）期望与现实...（那个黑色斑点是一个数字字段）

我已经尝试将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>

- Mike

---

请张贴您的 CSS，或在代码片段/JSFiddle 中重新生成问题。 - ketan

尝试这个：https://dev59.com/ymw05IYBdhLWcg3wYw1s - Pradeep Kumar

Answer 1

vertical-align="middle" - 是HTML元素无效的属性。请使用CSS规则或属性style="vertical-align: middle"

input {
  vertical-align: middle
}

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

- wishmaster

Answer 2

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

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

- Pradeep Kumar