css" style="font-family: Consolas, 'Courier New', Courier, mono, serif; background-color: rgb(231, 229, 220); width: 693px; overflow: auto; padding-top: 1px; color: rgb(54, 46, 43); line-height: 26px; margin: 18px 0px !important;">

[css] view plaincopy

 

1. label{  
2.     display: inline-block;  
3.     padding: 0 10px;  
4.     vertical-align: middle;  
5. }  
6. input{  
7.     outline: none;  
8.     border: 1px solid rgb(216, 216, 216);  
9.     padding: 2px 10px 2px 10px;  
10. }  
11. input[type="text"]{  
12.     height: 14px;  
13.     line-height: 14px;  
14.     border-radius: 5px;  
15.     padding:10px 10px;  
16.     vertical-align: middle;  
17.     color:#666;  
18. }  
19. input[type="button"]{  
20.     padding: 0px 10px;  
21.     height:40px;  
22. }  

[css] view plaincopy

 

1. .login-box p{  
2.     vertical-align:middle;  
3.     padding:10px 10px;  
4. }  

那么这里最主要的问题就是
input中采用了paddng的方式。

用padding将input撑开，那么这时候input的高度就只有14px;然后再设置line-height为14px;

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

需要将input与label垂直对齐，只需要将他们的父节点的vertical-align设置为middel.

再将height与line-height的高度设置为一致，当然必须要比input的实际高度高或者是相等。

这里说的是实际高度。

这里记录一下CSS盒子模型的高度问题: