Share an example tutorial on vertical centering of input text and button alignment issues

1. Box model problem: Please reset CSS

2. Buttons are not aligned: Please float or vertical -align:middle;Thencalculate the width and height to align them;

3. IE8 text is not centered : line-height attribute Note: IE8 does not support font writing (or a certain style does not support it)

The IE browser has been tested to IE8, use IE5, 6, and 7 with caution.

Cause of the problem: box model

1. Box model:

Put 2 inputs on the page, a text text box and a button button ( Set width and height without any other styles)

input[type='text']{width:400px;height:45px;}

input[type='button']{width: 45px;height:45px;}

Observation: IE8: Text box border:1px;padding:2px;

                                                                                                                                       . ：Text box border:1px;padding:2px;

Button border:3px;padding:0px 8px;

Google: Text box border:2px;padding:1px 0px;

Button border:2px;padding:1px 6px;

Add style to make border and padding the same

input[type='text']{width:400px ;height:45px;border:1px solid red;padding:0;}

input[type='button']{width:45px;height:45px;border:1px solid red;padding:0;}

Observation:

IE8: Text box border:1px;content:202x47 (IE's box model)

Button border:1px;content:45x45 (IE's box model) )

Firefox: Text box border:1px;content:200x45

Button border:1px;content:43x43

Google: Text box border:1px;content:200x45

Button border:1px;content:43x43

2. Button alignment method: Floating

(The reason is that the Offset is different and I have not searched for more knowledge. You can supplement this aspect by yourself. Knowledge);input[type='text']{width:400px;height:45px;border:1px solid red;padding:0;float:left;}

input[type='button ']{width:45px;height:45px;border:1px solid red;padding:0;float:left;}

Refer to step 2,

Calculate the width and height by yourself and align them

(Some may not have border, use the background color instead, please set border:0; adjust the height yourself) input[type='text']{width:400px;height:45px;border:1px solid red; padding:0;float:left;}input[type='button']{width:47px;height:47px;border:1px solid red;padding:0;float:left;}

3. IE8 text centering: line-height Note: IE8 does not support font writing

Replace font:normal 18px "Microsoft Yahei"; with font-size:18px;font-style: normal;font-family:"Microsoft Yahei"!

Or (you can use font:normal 18px "Microsoft Yahei"; writing method, but it is not in the middle)

input[type='text']{width:400px;height:25px; padding:10px 0px;border:1px solid red;float:left;}

input[type='button']{width:47px;height:47px;line-height: 47px;border:1px solid red;padding: 0;float:left;}

The above is the detailed content of Share an example tutorial on vertical centering of input text and button alignment issues. For more information, please follow other related articles on the PHP Chinese website!