入力テキストの垂直方向の中央揃えとボタンの配置の問題に関するサンプル チュートリアルを共有します。

1. ボックスモデルの問題: CSS をリセットしてください

2. ボタンが整列していません またはvertical-align:middle を整列させるために幅と高さを計算してください。 3. IE8 のテキストが中央に配置されません: line-height 属性 注: IE8 はフォントの書き込みをサポートしていません (または特定のスタイルがサポートしていません)

IE ブラウザは IE8 でテストされているため、IE5 を使用してください、6、7には注意してください。 問題の原因: ボックス モデル

1. ボックス モデル:

ページに 2 つの入力、テキスト ボックスとボタンを配置します (幅と高さを設定し、他のスタイルは使用しません)

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

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

観察: IE8: テキストボックスの境界線:1px;パディング:2px;

:ボタンの枠線: 3px; ;

ボタンの境界線:2px;パディング:1px 6px;

境界線とパディングを同じにするスタイルを追加します

input[type='text']{width: 400px;高さ:45px;border:1px 赤一色;パディング:0;}

input[type='button']{幅:45px;高さ:45px;border:1px 赤一色;パディング:0;}

観察:

IE8: テキスト ボックスの境界:1px;コンテンツ:202x47 (IE のボックス モデル)

ボタンの境界:1px;コンテンツ:45x45 (IE のボックス モデル) Firefox: テキスト ボックスの境界:1px;コンテンツ:200x45

ボタンborder:1px;content:43x43

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

Button border: 1px; content: 43x43

2. ボタンの配置方法: Floating

(オフセットが異なるため)この点については自分で補足することができます); :left;}

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

ステップ 2 を参照してください、

幅と高さを計算します自分で調整して配置してください

(境界線がないものもあります。代わりに背景色を使用します。border:0 を設定してください。高さは自分で調整してください)

input[type='text']{width:400px;height:45px; border:1px 赤一色;パディング:0;float:left;}

input[type='button ']{幅:47px;高さ:47px;border:1px 赤一色;パディング:0;float:left;}

3. IE8 テキストの中央揃え: line-height 注 IE8 はフォントの書き込みをサポートしていません

フォントを変更: 通常の 18px "Microsoft Yahei";replace with font-size:18px;font-style:normal;font-family:"Microsoft弥平「！」

または (font:normal 18px "Microsoft Yahei"; という書き方もできますが、真ん中ではありません)

input[type='text']{width:400px;height:25px;padding:10px 0px;ボーダー:1px ソリッドレッド;float:left;}

input[type='button']{width:47px;height:47px;line-height: 47px;border:1px ソリッドレッド;padding:0;float:left;}

以上が入力テキストの垂直方向の中央揃えとボタンの配置の問題に関するサンプル チュートリアルを共有します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。