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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值