這幾天在做表單時總會碰到復選框(checkbox)和單選框(radio)與文字不對齊的問題，要不是checkbox上浮了，要不是文字上浮。在前端開發過程中，單(復)選框和它們后面的提示文字在不進行任何設置的情況下，是無法對齊的，而且在Firefox和IE中相差甚大。即使設置了vertical-align:middle，也依然不能完美對齊。
解決辦法：
1、文字大小必須是偶數，比如12PX。
2、將文字加上label標簽並且也添加vertical-align:middle樣式。
3、然后去除表單元素的邊距。
案例：
<!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> </body> </html>