css教程-input和img同行对齐
同一行的input和img总是对不齐,img比input高出那么点,烦人,最常见的是使用验证码的时候~
众所周知,水平对齐用text-align,这个属性非常常用,而且它有一个重要属性:继承性!
在使用垂直对齐vertical-align时,我们会以为它也是继承的,可惜不是哦!!!
因此同一行的input和img要想对齐,input和img都必须设置为vertical-align为middle。
实例试试吧:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>input和img对齐 vertical-align</title> <style> * { margin: 0px; padding: 0px; outline: none; } html, body { font-family: "微软雅黑"; font-size: 16px; width: 100%; margin: 0px; padding: 0px; min-width: 780px; } .main { margin: 0px auto; height: 100%; width: 780px; padding-top: 60px; /*外层设置垂直居中,但是不能继承,因此仍无法对齐*/ vertical-align: middle; } .main input,.main img { height: 36px; line-height: 36px; padding: 2px 4px; padding-right: 30px; width: 120px; margin: 10px; color: #666; font-size: 14px; } .main img { border: 1px solid #000; padding-right: 4px; width:80px; } .main .verification2,.main .imgcode2 { /*两个都要设置垂直居中才能对齐*/ vertical-align: middle; } </style> </head> <body> <div class="main"> <form> <label for="verification1">没设置效果:</label><br/> <input class="verification1" type="text" name="verification1" placeholder="请输入验证码"/> <img class="imgcode1" alt="验证码" title="验证码" src="http://www.qingzz.cn/include/lib/checkcode.php"/> <br/> <label for="verification2">设置后效果:</label><br/> <input class="verification2" type="text" name="verification2" placeholder="请输入验证码"/> <img class="imgcode2" alt="验证码" title="验证码" src="http://www.qingzz.cn/include/lib/checkcode.php"/> </form> </div> </body> </html>
点赞1
支持一下