在电商里经常会遇到一个input和一段文字对齐的问题。
对于像我这样白菜的人，找百度谷歌上面说的很多都是把input的属性设置vertical-align:middle; 我试过了N次都不行，其实他们没有说完整，其实还要给文字用span标签，并且span标签还要加vertical-align:middle;
例如：在选择哪家银行支付的时候。
<!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;}
/*重点样式*/
#box2 label input{vertical-align:middle;}
#box2 label span{vertical-align:middle;}
/*以下这段可以删掉的样式*/
.tit { font-size: 14px; padding: 0pt; margin: 0pt; height: 31px; line-height: 31px; background: url(http://images.cnblogs.com/andyzhou/titbg.gif) repeat-x scroll center top rgb(203, 228, 239); }
.tit b { float: left; margin-left: 15px; margin-right:10px; }
.tit a { float: right; margin-right: 5px; margin-top: 6px; display: inline; }
a.cls { height: 18px; 18px; display: block; overflow: hidden; line-height: 200px; }
.nr { padding: 10px; text-align: left; }
a.cls, a.cls:link, a.cls:visited { background:url(http://www.chinaskin.net/images/andyzhou/cls.gif) no-repeat scroll center 0pt transparent; }
a.cls:hover { background: url(http://www.chinaskin.net/images/andyzhou/cls.gif) no-repeat scroll center -20px transparent; }
.box { border: 1px solid rgb(153, 153, 153); background: none repeat scroll 0% 0% rgb(255, 255, 255); }
.lt, .rt, .lb, .rb { background-image: url(http://www.chinaskin.net/images/andyzhou/abg.png); opacity: 0.1; filter:alpha(opacity:10); line-height: 0; }
.lt, .rt, .lb, .rb { height: 6px; 6px; }
.t, .b, .l, .r { background: none repeat scroll 0% 0% rgb(0, 0, 0); opacity: 0.1; filter:alpha(opacity:10); line-height: 0; }
.l, .r { 6px; }
.t, .b { height: 6px; }
.lt { background-position: 0pt 0pt; }
.rt { background-position: right 0pt; }
.lb { background-position: 0pt bottom; }
.rb { background-position: right bottom; }
s { position: absolute; top: -13px; left: 50px; display: block; height: 0pt; 0pt; font-size: 0pt; line-height: 0; border-color: transparent transparent rgb(102, 102, 102); border-style: dashed dashed solid; border- 10px; }
i { position: absolute; top: -9px; left: -10px; display: block; height: 0pt; 0pt; font-size: 0pt; border- 10px; line-height: 0; border-color: transparent transparent rgb(255, 255, 255); border-style: dashed dashed solid; }
.odiv { position: absolute; top: 29px; left: 70px; }
span {cursor: pointer;display: inline-block;}
.odiv2 { position: absolute; top: 29px; left: 20px; zoom:1; z-index:80; }
#box2 p{ font-size:14px;}
#box2 span{ float:none; display:inline-block;}
.paymr_10{ padding-right:15px; padding-top:5px;}
.bank_list{ padding:10px;}
.bank_wh{ 125px; height:32px; overflow:hidden;}
.bgns_bg{background:url(http://www.chinaskin.net/images/andyzhou/bank_bg.gif) no-repeat 0px -259px;}
.pa_bg{background:url(http://www.chinaskin.net/images/andyzhou/bank_bg.gif) no-repeat -130px -259px;}
.pab_bg{background:url(http://www.chinaskin.net/images/andyzhou/bank_bg.gif) no-repeat -130px -291px; 125px; height:45px; overflow:hidden; margin-left:12px;}
/*结束没有啥用的样式*/
</style>
</head>
<body>
<span class="f textLeftSpace" onclick="openpaytips(this,'box2',false,2)"><img src="http://www.chinaskin.net/themes/chinaskin/images/2013/six_year_pic/pay_02.jpg" /></span>
<div class="odiv2" id="box2" style="display: none;"><table border="0" cellpadding="0" cellspacing="0">
<tbody><tr><td class="lt"></td><td class="t"></td><td class="rt"></td></tr><tr><td class="l"></td><td class="box">
<h3 class="tit"><b>选择网银支付方式</b><a class="cls" href="javascript:;" onclick="openpaytips(this,'box2',false,2)" title="关闭">关闭</a></h3>
<div class="bank_list">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="paymr_10"><label><input type="radio" name="payment2" value="13" iscod="" onclick=""><span class="bank_wh bgns_bg"></span></label></td>
<td><label><input type="radio" name="payment2" value="14" iscod="" onclick=""><span class="bank_wh pa_bg"></span></label></td>
</tr>
<tr>
<td class="paymr_10"></td>
<td><p class="pab_bg"></p></td>
</tr>
</tbody>
</table>
</div>
</td><td class="r"></td></tr><tr><td class="lb"></td><td class="b"></td><td class="rb"></td></tr></tbody></table><s><i></i></s>
</div>
<script type="text/javascript">
function openpaytips(oSourceObj,oTargetObj,shutAble,nun){
var sourceObj = typeof oSourceObj == "string" ? document.getElementById(oSourceObj) : oSourceObj;
var targetObj = typeof oTargetObj == "string" ? document.getElementById(oTargetObj) : oTargetObj;
var new_nun=nun;
var box1=oTargetObj;
if(targetObj.style.display!="none"){
if(shutAble) return;
targetObj.style.display="none";
} else {
targetObj.style.display="block";
}
}
</script>
</body>
</html>