CSS深入之label與input對齊!

我想很多人都會碰到label與input 對齊的問題。

這個東西本身不難，但是要做到與IE這個東西兼容確實有點頭疼。

參考各大門戶網站的前端源碼。 得一方法，以記錄之：

html確實很簡單：

<div class="login-box" id="login-id">
			<form id="login-form-id" class="login-form">
				<p>
					<label>帳號</label>
					<input name="username" value="name" type="text" class="normal"/>
					<small>輸入用戶帳號.</small>
				</p>
				<p>
					<label>密碼</label>
					<input name="username" value="name" type="text" class="normal"/>
					<small>輸入用戶密碼.</small>
				</p>
				<p>
					<input type="button" value="login"/>
					<input type="button" value="cancel"/>
				</p>
			</form>
		</div>

CSS如下:

label{
	display: inline-block;
	padding: 0 10px;
	vertical-align: middle;
}
input{
	outline: none;
	border: 1px solid rgb(216, 216, 216);
	padding: 2px 10px 2px 10px;
}
input[type="text"]{
	height: 14px;
	line-height: 14px;
	border-radius: 5px;
	padding:10px 10px;
	vertical-align: middle;
	color:#666;
}
input[type="button"]{
	padding: 0px 10px;
	height:40px;
}


.login-box p{
	vertical-align:middle;
	padding:10px 10px;
}

那么這里最主要的問題就是
input中采用了paddng的方式。

用padding將input撐開，那么這時候input的高度就只有14px;然后再設置line-height為14px;

再加上vertical-align垂直居中，就能將input中的文字垂直居中。

需要將input與label垂直對齊，只需要將他們的父節點的vertical-align設置為middel.

再將height與line-height的高度設置為一致，當然必須要比input的實際高度高或者是相等。

這里說的是實際高度。

這里記錄一下CSS盒子模型的高度問題: