表单元素与提示文字无法对齐的问题(input,radio,checkbox文字对齐）

最新推荐文章于 2022-11-21 17:24:37 发布

Panda_Joy

最新推荐文章于 2022-11-21 17:24:37 发布

阅读量5k

点赞数

分类专栏： css(css3) 文章标签： checkbox与文字对齐表单元素与文字对齐

本文链接：https://blog.csdn.net/yongxiaokang1/article/details/41820231

版权

css(css3) 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

制作前端页面时，由于要兼容各个浏览器，表单的页面中都存在表单元素与提示文字无法对齐的问题。

解决的关键是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>

Panda_Joy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
表单元素与提示文字无法对齐的问题(input,radio,checkbox文字对齐）

制作前端页面时，由于要兼容各个浏览器，表单的页面中都存在表单元素与提示文字无法对齐的问题。解决的关键是vertical-align：middle属性，一定要给input标签和文字的标签同时加上该属性。对于纯英文的内容而言，这样就可以了，但是对于包含中文内容的，如果此时仍没有居中对齐，就需注意一下字体的设置了。经过测试，当把字体设置为Arial或Tahoma后则可以完美的实现对齐，而且在FF3.
复制链接

扫一扫