分享input文字垂直居中和按鈕對齊問題的實例教學

1、盒子模型問題：請CSS重置

2、按鈕不對齊：請浮動或vertical -align:middle;然後計算寬高，使其對齊；

3、IE8文字不居中：line-height屬性    注意：IE8不支援font寫法（或某個樣式不支援）

IE瀏覽器測試到IE8，IE5、6、7慎用。

問題原因：盒子模型

1、盒子模型：

在頁面放2個input，一個text文字框，一個button按鈕（設定寬高，無其他樣式）

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

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

##觀察值：IE8：文字方塊border:1px;padding:2px;

                按鈕狐狐狐加##px;padding:1px#px; ：文字方塊border:1px;padding:2px;

         按鈕border:3px;padding:0px 8px;

Google：文字方塊border:2px;padding:1px 0px;

        按鈕border:2px;padding:1px 6px;

新增樣式，讓border,padding一樣

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

觀察：

IE8：文字方塊border:1px;content:202x47 （IE的盒子模型）

        按鈕border:1px;content:45x45（IE的盒子模型）

火狐：文字方塊border:1px;content:200x45

       按鈕border:1px;content:43x43

#Google：文字方塊border:1px;content:200x45

       按鈕border:1px;content:43x43

2、按鈕對齊方法：浮動

（原因是Offset不同沒有搜尋更多的知識，可以自己補充這方面的知識）;

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

參考第2步，
自行計算寬高，使其對齊

（有的可能沒有border，用的背景色代替，請設定border:0;高度自行調整）

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文字居中：line-height     注意  IE8不支援font寫法

將font:normal 18px "微軟雅黑";換成font-size:18px;font-style: normal;font-family:"微軟雅黑"！

或（這樣可以用font:normal 18px "微軟雅黑";寫法，但有點不是在正中間）

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;height:47px;line-height: 47px;border:1px solid red;ding: 0;float:left;}###

以上是分享input文字垂直居中和按鈕對齊問題的實例教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！