input与文字上下居中问题
在电商里经常会遇到一个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; width: 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; width: 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 { width: 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; width: 0pt; font-size: 0pt; line-height: 0; border-color: transparent transparent rgb(102, 102, 102); border-style: dashed dashed solid; border-width: 10px; } i { position: absolute; top: -9px; left: -10px; display: block; height: 0pt; width: 0pt; font-size: 0pt; border-width: 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{ width: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; width: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 > |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用