input元素與文字對齊

示例代碼

<style>
*{margin:0;}
label{vertical-align:middle}
.inputcheckbox{vertical-align:middle;}
body{font-family:tahoma;font-size:12px;}
</style>
<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>
<input class="inputcheckbox " name="test" value="1" type="checkbox">
<label>測試文字x</label>
<br/>
<input class="inputcheckbox " name="test" value="1" type="checkbox">
<label>這是繁體中文</label>
<br/>
<input class="inputcheckbox " name="test" value="1" type="checkbox">
<label>次回から自動的にログイン</label>
<br/>
<input class="inputcheckbox " name="test" value="1" type="checkbox">
<label>English</label>
<br/>
<input class="inputcheckbox " name="test" value="1" type="checkbox">
<label>Чужой компьютер</label>
<br/>
<input class="inputcheckbox " name="test" value="1" type="checkbox">
<label>صفحات من ‏السعودية </label>
<br/>
<input class="inputcheckbox " name="test" value="1" type="checkbox">
<label>회원가입</label>
<br/>
<input class="inputcheckbox" name="test" value="1" type="checkbox">
<label>הפתוח</label>
<br/>
           

上述代碼涵蓋了三個問題：

1.單(複)選框和後面的提示文字不對齊，提示文字用label，設定vertical-align:middle;單選會下邊框缺失，是以要注意初始設定。

2.IE下文本框預設為22px，如果文本框内要文字居中對齊，需要設定字型為偶數

3.同理，其他國家的語言也可以實作居中對齊

參考引用：http://www.blueidea.com/tech/web/2009/6910.asp