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
支持一下