表单页面，为了使表单元素和文字都垂直居中对齐，加个样式input,select{vertical-align:middle}，文本框和下拉框都没问题，但是单选框和复选框就杯具了。
大多表现：单选，复选和文字无间距，单选文字偏上，复选偏上。
关于这些问题网上有人发表了看法，用table搞定一切。这个也是一种方法，哥也不BS。
对于ie6,7下的文字间距问题，网上看到有人说设置width:14px就好了，我试了下发现width:13px更佳。这个问题解决。
对于文字偏上的问题，试了vertical-align下的所有属性都不行。后来发现vertical-align是可以设置数值的，真是白混了这么久。
单选设置了vertical-align:-2px;复选设置vertical-align:-3px;就ok了。拿到ie6,7下测试，发现差了1px，使用了hack搞定。(ie6,7就是神奇)
<!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=gb2312" />
<title>表单页面</title>
<style type="text/css">
<!--
body,ul,input,select{margin:0px;padding:0px;}
body{font-size:12px;}
ul{list-style:none;margin:20px auto;width:500px;}
ul li{height:30px;}
ul li input,ul li select{vertical-align:middle;}
.input{height:18px;line-height:18px;border:1px #999999 solid;}
.checkbox,.radio{*width:13px;}
.radio{vertical-align:-2px;*vertical-align:-1px;}
.checkbox{vertical-align:-3px;*vertical-align:-2px;}
-->
</style>
</head>
<body>
<ul>
<li>姓名：<input type="text" class="input" /></li>
<li>性别：<input type="radio" name="sex" class="radio" value="1" />男 <input type="radio" name="sex" class="radio" value="2" />女</li>
<li>年龄：<select name="age" class="select">
<option value="">请选择</option>
<option>20以下</option>
<option>20-30</option>
<option>30-40</option>
<option>40以上</option>
</select></li>
<li>兴趣：<input type="checkbox" class="checkbox" name="interest" />上网 <input type="checkbox" class="checkbox" name="interest" />音乐 <input type="checkbox" class="checkbox" name="interest" />游戏 <input type="checkbox" class="checkbox" name="interest" />电影 <input type="checkbox" class="checkbox" name="interest" />其他</li>
<li></li>
</ul>
</body>
</html>
第二种方案:
1.input 文本框 文字垂直居中对齐
表单默认input文本框文字并不垂直居中而在顶端，如何调整呢，可以通过css来调整垂直高度，代码演示如下
<input type="text" style="font-size:12px;line-height:45px; height:50px;" value="www.itstudy.cn"/>
height: 设置input样式的高度，line-height:设置input里文字的行高度
heigth和line-height两项必需同时设置，才能生效！
一般来说height和line-height的值 height的值要稍稍大一些。
但是上述方法在firefox中无效，如何实现在ie和firefox下文字都垂直居中呢？可以不用line-height，代码演示如下：
<input type="text" style="font-size:12px;padding-top:15px; height:50px;" value="www.itstudy.cn"/>
2.input 文本框 文字垂直居中对齐
在ie中文字垂直居中对齐的话:
在css中把line-height的属性设置成height的高度即可。
可能有的浏览器如此设置依然不居中，此时可以使用padding属性。
如果文本框有背景图片的话就会向下凸出一块，此时可以把max-height值设为height的值。
3.input文本框、文字、按钮、图片 垂直居中对齐的解决办法
当我们在做用户注册、登陆及搜索表单时，经常碰到文字、文本框、图片、按钮在一行时不能垂直居中对齐，本人今天遇到类似的问题，解决办法是把form里面的表单元素设置vertical-align:middle；属性就OK，实例如下：
<!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>input 垂直居中对齐</title>
<style type="text/css">
*{ padding:0; margin:0; }
/* =search */
.search{ position:absolute; top:46px; right:49px; text-align:right; }
.search input{ vertical-align:middle; }
.searchkey{ width:248px; height:14px; *height:20px; _height:20px; line-height:20px; padding:6px 4px;*padding:3px 4px;_padding:3px 4px; background:#fdfdfd; border:1px solid #d4d6cb; }
</style>
</head>
<div class="search">
<form action="#" method="get" name="g3unionform">
<img src="http://hiphotos.baidu.com/wely_ton/abpic/item/5cbdee023bc133523912bbc4.jpg" width="35" height="28" />
<input name="searchkey" type="text" class="searchkey" />
<input name="subm" type="image" src="images/g3union_07.gif" />
</form>
</div>
<body>
</body>
</html>
UL中的LI
<li style="margin:0 auto;line-height:30px">
<label style="vertical-align:button;">标鉴</label>
<label>
<input type="checkbox" style="vertical-align:middle;" name="auditStatus" id="auditStatus" />创ABD
</label>
大多表现：单选，复选和文字无间距，单选文字偏上，复选偏上。
关于这些问题网上有人发表了看法，用table搞定一切。这个也是一种方法，哥也不BS。
对于ie6,7下的文字间距问题，网上看到有人说设置width:14px就好了，我试了下发现width:13px更佳。这个问题解决。
对于文字偏上的问题，试了vertical-align下的所有属性都不行。后来发现vertical-align是可以设置数值的，真是白混了这么久。
单选设置了vertical-align:-2px;复选设置vertical-align:-3px;就ok了。拿到ie6,7下测试，发现差了1px，使用了hack搞定。(ie6,7就是神奇)
<!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=gb2312" />
<title>表单页面</title>
<style type="text/css">
<!--
body,ul,input,select{margin:0px;padding:0px;}
body{font-size:12px;}
ul{list-style:none;margin:20px auto;width:500px;}
ul li{height:30px;}
ul li input,ul li select{vertical-align:middle;}
.input{height:18px;line-height:18px;border:1px #999999 solid;}
.checkbox,.radio{*width:13px;}
.radio{vertical-align:-2px;*vertical-align:-1px;}
.checkbox{vertical-align:-3px;*vertical-align:-2px;}
-->
</style>
</head>
<body>
<ul>
<li>姓名：<input type="text" class="input" /></li>
<li>性别：<input type="radio" name="sex" class="radio" value="1" />男 <input type="radio" name="sex" class="radio" value="2" />女</li>
<li>年龄：<select name="age" class="select">
<option value="">请选择</option>
<option>20以下</option>
<option>20-30</option>
<option>30-40</option>
<option>40以上</option>
</select></li>
<li>兴趣：<input type="checkbox" class="checkbox" name="interest" />上网 <input type="checkbox" class="checkbox" name="interest" />音乐 <input type="checkbox" class="checkbox" name="interest" />游戏 <input type="checkbox" class="checkbox" name="interest" />电影 <input type="checkbox" class="checkbox" name="interest" />其他</li>
<li></li>
</ul>
</body>
</html>
第二种方案:
1.input 文本框 文字垂直居中对齐
表单默认input文本框文字并不垂直居中而在顶端，如何调整呢，可以通过css来调整垂直高度，代码演示如下
<input type="text" style="font-size:12px;line-height:45px; height:50px;" value="www.itstudy.cn"/>
height: 设置input样式的高度，line-height:设置input里文字的行高度
heigth和line-height两项必需同时设置，才能生效！
一般来说height和line-height的值 height的值要稍稍大一些。
但是上述方法在firefox中无效，如何实现在ie和firefox下文字都垂直居中呢？可以不用line-height，代码演示如下：
<input type="text" style="font-size:12px;padding-top:15px; height:50px;" value="www.itstudy.cn"/>
2.input 文本框 文字垂直居中对齐
在ie中文字垂直居中对齐的话:
在css中把line-height的属性设置成height的高度即可。
可能有的浏览器如此设置依然不居中，此时可以使用padding属性。
如果文本框有背景图片的话就会向下凸出一块，此时可以把max-height值设为height的值。
3.input文本框、文字、按钮、图片 垂直居中对齐的解决办法
当我们在做用户注册、登陆及搜索表单时，经常碰到文字、文本框、图片、按钮在一行时不能垂直居中对齐，本人今天遇到类似的问题，解决办法是把form里面的表单元素设置vertical-align:middle；属性就OK，实例如下：
<!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>input 垂直居中对齐</title>
<style type="text/css">
*{ padding:0; margin:0; }
/* =search */
.search{ position:absolute; top:46px; right:49px; text-align:right; }
.search input{ vertical-align:middle; }
.searchkey{ width:248px; height:14px; *height:20px; _height:20px; line-height:20px; padding:6px 4px;*padding:3px 4px;_padding:3px 4px; background:#fdfdfd; border:1px solid #d4d6cb; }
</style>
</head>
<div class="search">
<form action="#" method="get" name="g3unionform">
<img src="http://hiphotos.baidu.com/wely_ton/abpic/item/5cbdee023bc133523912bbc4.jpg" width="35" height="28" />
<input name="searchkey" type="text" class="searchkey" />
<input name="subm" type="image" src="images/g3union_07.gif" />
</form>
</div>
<body>
</body>
</html>
UL中的LI
<li style="margin:0 auto;line-height:30px">
<label style="vertical-align:button;">标鉴</label>
<label>
<input type="checkbox" style="vertical-align:middle;" name="auditStatus" id="auditStatus" />创ABD
</label>
扫一扫
867
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
