好!欢迎访问迷津渡口 现在时间是:

迷津渡口

越感到迷惑 越接近真理

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
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 恋恋风尘
  2. 恋恋风尘
  3. 恋恋风尘
  4. 恋恋风尘
  5. 恋恋风尘
  6. 恋恋风尘
  7. 恋恋风尘
  8. 恋恋风尘
  9. 恋恋风尘