最近のプロジェクトには、多くのフォーム制作、特にチェックボックスとラジオボックスが含まれます。ただし、フロントエンド開発プロセス中に、単一（複雑な）チェックボックスとその背後にあるプロンプトテキストが設定なしでは整列できず、FirefoxとIEの間に大きな違いがあることがわかりました。垂直整列：中央が設定されていても、完全に整列することはできません。下の図に示すように：
そこで、私はいくつかのウェブサイトをオンラインで確認しましたが、下の図（FF3.5）に示すように、この問題が一般的であることがわかりました。
多くのWebサイトでは、フォーム要素を迅速なテキストと並べることができないという問題があります。だから私はこの問題を研究するつもりです。最初に、私はシニアウィートリーによる「みんなが垂直に整理するために皆さんと言う」という記事を検索しました。彼の記事で、Wheatleeは垂直センタリングに関するいくつかの重要なポイントに言及しました。
1.垂直整列：中央の場合、要素の中心は周囲の要素の中心と整列しています。
2。ここの中心の定義は次のとおりです。写真はもちろん高さの半分であり、テキストはベースライン、つまり小文字xの中心に基づいて0.5Exで移動する必要があります。ただし、多くのブラウザはExのユニットを0.5EMとして定義することが多いため、必ずしもXの中心ではありません（ベースラインなどの名詞がわからない場合は、最初にWheatleeの記事を読んでください）
この考えによれば、私が遭遇した問題と比較して、最初に思い浮かぶのは、ブラウザがチェックボックスと画像に同じルールを使用してレンダリングするかどうかを確認することです（チェックボックスを正方形の画像として扱うかどうか）。だから私は次のコードを書きました：
<style>
ボディ{font-size：12px;}
</style>
<入力スタイル= Vertical-Align：Middle;名前=テストタイプ=チェックボックス>
<img style = vertical-align：middle; src = testpic.gif />
テストテキスト
コードのtestpic.gifは、チェックボックスとまったく同じサイズの黒い画像です。以下はFF3.5の下に表示されます。
前のページ1 2 3 4次のページ全文を読む