HTML - Table Row vertical alignment issues

Question

I can't seem to get these elements vertically aligned (see attached screenshot) Expectation vs Reality... (that black blob is a number field)

I've tried applying CSS style to everything - vertical-align: middle; vertical-align: text-top; vertical-align: center; and by everything, I mean, the form, the text field, the row.. nothing seems to work.

I need some expert advice here. thanks code below

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

try this http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div — Pradeep Kumar, Feb 26 '16 at 04:56

score 0 · Answer 1 · answered Feb 26 '16 at 05:06

Try this css from 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;
}

wishmaster · Answer 2 · 2016-02-26T05:17:44.993

vertical-align="middle" - is invalid attribute for HTML elements. Use css rule instead or attribute 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>

HTML - Table Row vertical alignment issues

2 Answers2