HTML - 錶行垂直對齊的問題

我似乎無法得到這些元素垂直對齊（見附件截圖） Expectation vs Reality...（即黑色斑點是一個數字字段）HTML - 錶行垂直對齊的問題

我試着申請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>

來源

2016-02-26 Mike

發表你的CSS也或者摘錄/小提琴再生問題。 – ketan

試試這個http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div –

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

來源

2016-02-26 05:06:36

垂直對齊嘗試此CSS = 「中間」 - 爲HTML元素無效的屬性。使用CSS規則，而或屬性的風格=「垂直對齊：中間的」

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>

來源

2016-02-26 05:12:35 wishmaster

HTML - 錶行垂直對齊的問題

回答

相關問題