CSS goes deep into the label and input alignment!

I think many people will encounter the problem of alignment between label and input.

This is not difficult, but it is a headache to be compatible with IE.

Refer to the front-end source code of each major portal website. One method is recorded as follows:

Html is really simple:

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

The main problem here is
The paddng method is used in input.

Use padding to open the input. At this time, the input height is only 14px, and then set line-height to 14px;

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

To vertically align input and label, you only need to set vertical-align of their parent node to middel.

Set the height to the same as the line-height. Of course, the height must be higher or equal than the actual height of input.

This is the actual height.

Here we record the height of the CSS box model: