表單元素與提示文字無法對齊的問題(input,radio,checkbox文字對齊）
阿新 • • 發佈：2019-02-19
製作前端頁面時，由於要相容各個瀏覽器，表單的頁面中都存在表單元素與提示文字無法對齊的問題。
解決的關鍵是vertical-align：middle屬性，一定要給input標籤和文字的標籤同時加上該屬性。對於純英文的內容而言，這樣就可以了，但是對於包含中文內容的，如果此時仍沒有居中對齊，就需注意一下字型的設定了。經過測試，當把字型設定為Arial或Tahoma後則可以完美的實現對齊，而且在FF3.5/IE6/IE7/IE8和Chrome中均顯示正常。
最終程式碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>測試vertical-align</title> <style> *{margin:0;} label{vertical-align:middle} .inputcheckbox{vertical-align:middle;} body{font-family:tahoma;font-size:12px;} </style> </head> <body> <input class="inputcheckbox" name="test" value="1" type="checkbox"> <label>測試文字x</label> <br/><br/> <input class="inputcheckbox " name="test2" value="2" type="radio"> <label>測試文字x</label> <br/><br/> <input class="inputcheckbox " name="Text1" type="text" /> <label>文字</label> <input class="inputcheckbox " name="Text1" type="text" /> <label>文字</label> <br/><br/> <label>測試文字</label> <input class="inputcheckbox " name="Button1" type="button" value="按鈕" /> <br/><br/> <select class="inputcheckbox " name="Select1"> <option>測試文字</option> </select> <label>測試文字</label> </html>