[Css -- Form] When the font is 12 PX, the Form (radio, checkbox) is aligned with the text,

[Css -- Form] When the font is 12 PX, the Form (radio, checkbox) is aligned with the text,

The 12 PX font alignment is only applicable to radio and checkbox.

CSS:

<pre name="code" class="html">.form {font-size: 12px; line-height: 1.4}.form .txt {width: 180px; height: 25px; padding:3px; border:1px solid #dbdbdb; line-height: 25px; color:#999; vertical-align: middle}.form .txt:hover,.form .txt:focus {border-color:#51b5f7; color:#333}.form .btn {width: 78px; height: 33px; *margin-top: 1px; border:none; background-color: #31a5f7; border-radius: 3px; font-size: 15px; color:#fff; vertical-align: middle; transition:all .3s linear 0s}.form .btn:hover {background-color: #51b5f7}.form .radio {margin-top: -3px; *margin-top: 0; vertical-align: middle}.form .chkbox {margin-top:1px; margin-top: -2px\9;  *margin-top:0px; vertical-align: middle;}

HTML:

<Form action = "#" class = "form"> <div> <input type = "radio" value = "0" name = "media" class = "radio"> Network <input type = "radio" value = "1" name = "media" class = "radio"> TV <input type = "radio" value = "2" name = "media "class =" radio "> newspaper </div> <input type =" checkbox "value =" 0 "name =" media "class =" chkbox "> Network <input type = "checkbox" value = "1" name = "media" class = "chkbox"> TV <input type = "checkbox" value = "2" name = "media" class = "chkbox"> newspaper </div> <input type = "text" name = "input" class = "txt"> <input type = "submit" name = "btnSubmit" value = "Submit" class = "btn"> </div> </form>

It has been tested that IE, Firefox, and chrome are basically perfectly aligned. in safari, checkbox relies on a pixel, but it can be viewed as well.

Note: Setting the text line height to 1.4 (without unit) is the most ideal (the text height is the closest to radio and checkbox height). The upper and lower spacing is controlled by the outer element.

The following is a preview of each Browser:

IE9/10 is slightly different from IE11, but it is not visible to the naked eye. In addition, we can see that, the radio width of the other three browsers except IE is 1px larger than that of the checkbox.