form表单文字垂直居中设计方案

尝试了一天，忽然看到曙光，在各种浏览器下效果差强人意，今后我的form表单的整体格式就这么写了。这个方案的要点就是 height/line-height/float 这三者同时使用。

<form>

<div class="item">

<label for="mail">邮箱:</label><input type="text" id="mail"><span class="alert">邮箱格式不正确</span>

<p class="tip">请输入常用邮箱，通过验证后可用于登录和找回密码</p>

</div>

<div class="item">

<label for="uname">用户名:</label><input type="text" id="uname"><span class="alert">用户名过长</span>

<p class="tip">不超过7个汉字，或14个字节（半角数字、半角字母或下划线），且不能是纯数字</p>

</div>

</form>

css 方案:

body,div,span,p,form,input{

margin:0;padding:0;

}

form{

font-size:14px;

}

form div label{

height：30px;

line-height:30px;

float:left;

width:100px;

}

form div input{

height:28px;

line-height:28px;

float:left;

width:200px;

border:1px solid #666666;

outline:none;/*去除获得焦点时chrome自动边框*/

}

form div span{

height:30px;

line-height:30px;

float:left;

width:200px;

}

form div p{

height:30px;

line-height:30px;

clear:both;

margin-left:100px;

}