[CSS] CSS in-depth label is aligned with input!

I think a lot of people will encounter the question of label and input alignment.

This thing itself is not difficult, but to do with IE this thing compatible really a little headache.

Refer to the front-end source of the major portal sites. Get a way to record it:

HTML is really simple:

<div class= "Login-box" id= "Login-id" >
			<form id= "Login-form-id" class= "Login-form" >
				<p>
					<label> account </label>
					<input name= "username" value= "name" type= "text" class= "normal"/>
					<small> Enter user account .</small>
				</p>
				<p>
					<label> password </label>
					< Input name= "username" value= "name" type= "text" class= "normal"/>
					<small> Enter user password .</small>
				</p>
				<p>
					<input type= "button" value= "Login"/>
					<input type= "button" value= " Cancel "/>
				</p>
			</form>
		</div>

The CSS is as follows:

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;
}

So the main problem here is
The Paddng method is used in input.

Use padding to open the input, then the height of input is only 14px, and then set Line-height to 14px;

With the vertical-align vertically centered, the text in input can be centered vertically.

You need to align input vertically with the label, just set the vertical-align of their parent node to Middel.

The height is then set to the same level as the line-height, which of course must be higher or equal than the actual height of input.

This is about the actual height.

Here's a note on the height of the CSS box model: