[ CSS ] 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盒子模型的高度問題: